CSS Platzierung, böse Browser

Beitrag von **ypsie** » 29.01.2006, 22:33

Guten Abend,

<html>
<head>
<meta http-equiv="inhalt-type" inhalt="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>eurwf kjerfjre kf,ge jerbj</title>
</head>

<body>
<a href="index.html"><img src="logo-super.jpg" alt="eurwf kjerfjre kf,ge jerbj 
    erk" width="781" height="160" border="0" class="header"/></a> 
<ul>
  <li class="akt"><a href="#">Startseite</a></li>
  <li><a href="#">Seite1</a></li>
  <li><a href="#">Seite2</a></li>
  <li><a href="#">Seite3</a></li>
  <li><a href="#">Seite4</a></li>
  <li><a href="#">Seite5</a></li>
  <li><a href="#">Seite6</a></li>
</ul>


<div class="inhalt"> 
  <h1>eurwf kjerfjre kf,ge jerbj</h1>
  <p><img src="os2.jpg" width="130" height="86" /> eurwf kjerfjre kf,ge jerbj 
    erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre 
    kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj 
    erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre 
    kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj 
    erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre 
    kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj 
    erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre 
    kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj 
    erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre 
    kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj 
    erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre 
    kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk </p>
</div>

</body>
</html>

Code: Alles auswählen

body &#123;
margin&#58; 0px;
padding&#58; 0px;
font-family&#58; Verdana;
font-size&#58; 12px;
background&#58; #ffffff;
color&#58; #032958;
&#125;

.header &#123;
margin-top&#58; 10px;
&#125;


ul &#123;
position&#58;absolute;
left&#58;10px; top&#58;180px;
padding&#58; 0px;
margin&#58; 0px;
list-style&#58; none;
width&#58; 160px;
&#125;	

li a&#123;
font-weight&#58; bold;
text-decoration&#58; none;
color&#58; #032958;
display&#58; block;
padding&#58; 8px;
border-left&#58; 4px solid #C1E6F8;
border-right&#58; 4px solid #C1E6F8;
margin-bottom&#58; 10px;
&#125;	
	
.akt a, li a&#58;hover &#123;
background&#58; #C1E6F8;
color&#58; #286ea0;
border-left&#58; 4px solid #2DA9D9;
border-right&#58; 4px solid #2DA9D9;
&#125;

.inhalt &#123;
position&#58;absolute;
left&#58;200px; top&#58;180px;
width&#58; 611px;
border-right&#58; 20px solid #D2EDFA;
padding-right&#58; 20px;
line-height&#58; 20px;
&#125;

.inhalt a &#123;
text-decoration&#58; underline;
color&#58; #015A85;
padding&#58; 3px 3px 3px 3px;
&#125;

.inhalt a&#58;hover &#123;
text-decoration&#58; underline;
color&#58; #ffffff;
background-color&#58; #015A85;
padding&#58; 3px 3px 3px 3px;
&#125;

.inhalt img &#123;
border&#58; 2px dashed #2DA9D9;
float&#58; left;
margin&#58; 0px 10px 0px 0px;
&#125;

a img &#123;
border&#58; 0;
&#125;

h1 &#123;
font-size&#58; 16px;
margin&#58; 0px;
padding&#58; 0px;
color&#58; #032958;
&#125;

Ich will, dass der rechte Border des Inhalts mit dem Header oben abschließt.
Also eine Linie bilden, wenn ihr wisst, was ich meine. Kein Abstand nach rechts oder links.

Bitte um Hilfe!

lg, julian

von **Anzeige von ABAKUS** »

Beitrag von **Fluidum** » 29.01.2006, 23:16

Das was du da macht ist völliger Unsinn...

Du machst da völlig unnötige Sachen, lies etwas mehr zur Semantik von Markup und CSS!

Wenn ich Morgen Zeit habe, dann überarbeite ich dir das mal...

Beitrag von **Fluidum** » 29.01.2006, 23:41

Ich konnte doch nicht ganz die Finger davon lassen... Hier mal ein Anfang wie es aussehen sollte!

Ich hab es auch mal etwas farblich dargestellt, damit du es besser sehen kannst, musst du dann noch ändern...

Den Rest musst du dann mal selber zusammen basteln!

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
* &#123;
	padding&#58; 0;
	margin&#58; 0;
	font-family&#58; Verdana, Arial, Helvetica, sans-serif;
	font-size&#58; 90%;
&#125;
div#wrap &#123;
	width&#58; 781px;
	background-image&#58; url&#40;/logo-super.jpg&#41;;
	background-repeat&#58; no-repeat;
	padding-top&#58; 160px;
&#125;
div#sidebar &#123;
	float&#58; left;
	background-color&#58; #009999;
	width&#58; 200px;
&#125;
div#content &#123;
	float&#58; right;
	background-color&#58; #FF9900;
	width&#58; 581px;
&#125;
-->
</style>
</head>
<body>
<div id="wrap">

<div id="sidebar">
  <p>tzjtzj tzj tzjtzj tjtz jtzj tzjtjtjtzjt tzjtz tzj tzj</p>
  <p>fgnfgn z hjtzjtzjtzj ztjtzj tzjjzt tj tzj tzj tzjtz ztj</p>
  <p>fgn ztjj tzjtzj tzjtzj tzjtzj tjzt jztj tzj </p>
  <p>fgn zhj tjtzj tjtzjtzjt tzj tzjtzj tzjtzj tzj tzj  </p>
</div><!-- end.sidebar -->

<div id="content">
  <p>tzjtzj tzj tzjtzj tjtz jtzj tzjtjtjtzjt tzjtz tzj tzj</p>
  <p>fgnfgn z hjtzjtzjtzj ztjtzj tzjjzt tj tzj tzj tzjtz ztj</p>
  <p>fgn ztjj tzjtzj tzjtzj tzjtzj tjzt jztj tzj </p>
  <p>fgn zhj tjtzj tjtzjtzjt tzj tzjtzj tzjtzj tzj tzj  </p>
</div><!-- end.content -->

</div><!-- end.wrap -->
</body>
</html>

P.S.: Wenn du schon so einen kleinen Bereich (781 Pixel) wählst, dann würde ich es gleich einen Tick kleiner machen (760 Pixel), dann passt es nämlich auch bei einem 15" Monitor bei einer Auflösung von 800x600 Pixel

von **Anzeige von ABAKUS** »

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:

einzigartige Texte
suchmaschinenoptimierte Inhalte
eine sinnvolle Content-Strategie
Beratung und Umsetzung

Jetzt anfragen: 0511 / 300325-0

Beitrag von **marquis** » 29.01.2006, 23:44

Und dann noch kurzsschrift im css

und dann wirds schon...

bg
m

Beitrag von **Fluidum** » 29.01.2006, 23:47

Und vergiss den IE.... Die Seiten immer zuerst im FireFox und Opera testen und dann im Internet Explorer!!!

Beitrag von **ypsie** » 30.01.2006, 17:29

Danke Leute, nur benutzen leider noch viele den IE.
Ein Problem gibts noch.

Code: Alles auswählen

<div id="sidebar">
<ul>
  <li class="akt"><a href="#">Startseite</a></li>
  <li><a href="#">Seite1</a></li>
  <li><a href="#">Seite2</a></li>
  <li><a href="#">Seite3</a></li>
  <li><a href="#">Seite4</a></li>
  <li><a href="#">Seite5</a></li>
  <li><a href="#">Seite6</a></li>
</ul>
</div><!-- end.sidebar -->

div#wrap &#123;
   width&#58; 778px;
   background-image&#58; url&#40;logo-super.jpg&#41;;
   background-repeat&#58; no-repeat;
   padding-top&#58; 180px;
&#125;

div#sidebar &#123;
   float&#58; left;
   width&#58; 160px;
&#125;

div#content &#123;
   float&#58; right;
   width&#58; 558px;
   line-height&#58; 20px;
   padding-right&#58; 20px;
   border-right&#58; 20px solid #D2EDFA;
&#125;

ul &#123;
list-style&#58; none;
width&#58; 160px;
padding-left&#58; 10px;
&#125;

Der Abstand beim IE von Content und Navi ist viel zu groß.
Passt sonst alles so?

Beitrag von **Fluidum** » 30.01.2006, 18:35

Du sollst auch den IE nicht vergessen... Die meisten User sind damit unterwegs!

Du sollst nur beim erstellen deiner Webseite erst mit Firefox und Opera testen und dann mit dem IE, da Opera und FF die Standards besser umsetzen!

Den Code kann ich mir später ansehen, da ich gerade nicht zu hause bin...

Beitrag von **ypsie** » 31.01.2006, 13:20

Vielen Dank für die Hilfen!
Wenn ihr noch was findet, bzw. das kleine Problem lösen könnt, bin ich sehr dankbar.

Sonst werd ich die Seite heute so erstellen.

lg, julian