mein erstes css layout-dazu habe ich jetzt ein paar fragen:)

destroy90210 · #1 (**permalink**) 27.12.2004, 10:49

hi,

also ich habe jetzt mal meine erste seite nur mit css gemacht und da gibt es ein paar sachen die ich nicht so ganz verstehe, warum ein browser etwas so macht und der andere nicht...

hier mal der link
http://gregor.slosh-slosh.com/galerie/test.html

meine erste frage betrifft den blauen header.
ich habe hier einen div container darin befinde sich die grafik und daneben der link anmelden, den würde ich gerne rechts anordnen lassen ich habe
es versucht mit <span class="float:right">Anmelden</span>, aber damit gehts leider nicht, hat wer ne idee wie man das machen könnte ??

die zweite frage hast was mit den grünen kasterln zu tun
im NS positioniert er die kasterln genau 5px neben dem roten menü und am ende habe ich auch wieder 5px, nur im IE macht er links 10px abstand und rechts 0px... warum ?? habe magin:5px verwendet

und meine letzte frage betrifft unten die rote leiste
die schwarze box ist 620 pixel breit (ergibt sich aus den grünen boxen die 200 lang sind und 5 margin haben) und die rote leiste ist 5px von links weg positioniert und 615 pixel lang warum schaut sie im NS trotzdem auf der rechten seite über die schwarze box heraus und im IE auch ?

ok das wars an fragen

hier der ganze css code

Code:

body {
	background-image: url('../grafiken/mainbg.gif');
	font-family:Verdana;
	font-size:9;
}
#header{
	position:absolute;
	top:10px;
	left:20px;
	width:770px;
	height:35px;
	background-color:#0000ff;
}
#menubox {
	position:absolute;
	top:55px;
	left:20px;
	width:150px;
	height:600px;
	background-color:#ff0000;
}
#contentbox {
	position:absolute;
	top:55px;
	left:170px;
	width:620px;
	height:600px;
	background-color:#000000;
}
#seitenblatterbox {
	position:absolute;
  bottom:0px;
	width:620px;
  left:5px;
	background-color:#ff0000;
  padding:2px;
}
#thmubnailbox{
	float:left;
	width:200px;
	height:66px;
	margin:0px 0px 5px 5px;
	background-color:#00ff00;
}
img.headerimg{

}
p.menu{
	margin:15px 0px 50px 5px
}
#eingabefeld{
   border:0;
   margin:0px 0px 0px 5px;
   background-color:#ffffff;
   font-size:9px;
   color:#000000;
 	 font-family:Verdana;
}
#dropdown{
   border:0;
   margin:0px 0px 0px 5px;
   background-color:#ffffff;
   font-size:9px;
   color:#000000;
 	 font-family:Verdana;
}
#button{
	border:0px;
 	margin:0px 0px 0px 5px;
  background-color:#4B0D01;
  font-size: 9px;
  color:#ffffff;
  font-family:Verdana;
  font-weight:bold;
	margin-top:5px;
}
#h1{
	font-family:verdana;
	font-size:11px;
  font-weight:bold;
  color:#ffffff;
  margin:5px;
}
#h2{
	font-family:verdana;
	font-size:10px;
  font-weight:bold;
  color:#000000;
  margin:5px;
}
#text{
	font-family:verdana;
	font-size:10px;
  color:#ffffff;
  margin:5px;
}

und hier der html code

Code:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Slosh-Slosh//</title>
<meta name="Slosh-Slosh//" content="Photography">
</head>
<body>
<div id="header">[img]grafiken/slosh-slosh-logo.gif[/img]<span>Anmelden</span></div>
<div id="menubox">
	<p class="menu">
  	<span id="h1">Login:</span>

  	<span id="h2">Name:</span>

  	<input id="eingabefeld" type="Text" name="" value="" size="" maxlength="">

  	<span id="h2">Passwort:</span>

  	<input id="eingabefeld" type="Password" name="" value="" size="" maxlength="">

    <input id="button" type="Submit" name="" value="Login">
  </p>
  <p class="menu">
  	<span id="h1">Suche:</span>

  	<span id="h2">Stichwort:</span>

    <input id="eingabefeld" type="Text" name="" value="" size="" maxlength="">
    <span id="h2">Fotografen:</span>

    <select  id="dropdown" name="ff" size="1">
    	<option value="">rene Wallentin</option>
      <option value="">rene Wallentin</option>
      <option value="">rene Wallentin</option>
      <option value="">rene Wallentin</option>
      <option value="">rene Wallentin</option>
    </select>
  </p>
</div>
<div id="contentbox">
	<p id="text">66 Einträge gesamt - 21 Einträge auf der Seite - von Nummer 1 bis 21</p>
	<div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="thmubnailbox">a</div>
  <div id="seitenblatterbox">«« « 1  2  3  4 »   »»</div>
</div>
</body>
</html>

also das ist meine erste css seite falls der code totaler schrott ist bitte sagen

und vorallem wie man es besser machen/lösen könnte

mfg,
destroy90210

Zwacky · #2 (**permalink**) 27.12.2004, 21:03

Zitat:

Zitat von destroy90210

meine erste frage betrifft den blauen header.
ich habe hier einen div container darin befinde sich die grafik und daneben der link anmelden, den würde ich gerne rechts anordnen lassen ich habe
es versucht mit <span class="float:right; text-align:right;">Anmelden</span>, aber damit gehts leider nicht, hat wer ne idee wie man das machen könnte ??

Mit float:right; bist du auf der richtigen Spur. In deinem Code hast du geschrieben

Code:

<span>Anmelden</span>

Ich denke, du hast das einfach offen gelassen, nun gut, versuche es mal mit:

Code:

<span style="float:right;">Anmelden</span>

Ich bin mir nicht sicher, ob das semikolon (

beim style auch vorhanden sein muss, ich setz es auf jedenfall immer und fahre gut damit

.
Mit class (du hast geschrieben: <span class="float:right"> ) kannst du von der abgespeicherten css datei die vorformatierten werte rausnehmen. für class müssen sie mit einem punkt (.) zuerst adressiert sein. bei id ist es ein #.

Zitat:

Zitat von destroyer90210

die zweite frage hast was mit den grünen kasterln zu tun
im NS positioniert er die kasterln genau 5px neben dem roten menü und am ende habe ich auch wieder 5px, nur im IE macht er links 10px abstand und rechts 0px... warum ?? habe magin:5px verwendet

Ich glaube, das hat was mit dem Quirk Modus zu tun. Jedenfalls hab ich eine Lösung parat:

Code:

#contentbox { 
   position:absolute; 
   top:55px; 
   left:170px;
   width:620px; 
   height:600px; 
   padding-left:5px;
   background-color:#000000; 
} 
#thmubnailbox{ 
   float:left; 
   width:200px; 
   height:66px; 
   margin:0px 5px 5px 0px; 
   background-color:#00ff00; 
}

Beim thmubnailbox wird jetzt unten und rechts schwarz angezeigt (noch nicht links.)
Dieses fehlende linke, wird dann vom ganzen (content) reinge'padded' und somit stimmt es auf den pixel genau
(gestet in opera & IE)

Auf deine 3. Frage habe ich leider keine Antwort. Könnte aber auch sehr gut mit dem Quirk Modus tun zu haben.

Hoffe das hilft dir weiter ^^;;
Gruss

destroy90210 · #3 (**permalink**) 01.01.2005, 10:56

thx für deine antwort das mit den grünen boxen funktioniert jetzt super

sorry das ich jetzt erst antworte ich war ein paar tage weg...

und das mit dem anmelden mit dem float right passt auch fast, keine ahnung warum ich da class statt style verwendet habe

aber jetzt meine frage dazu, wenn ich das jetzt schreibe mit float right dann ordnet er den link anmelden zwar rechts an, aber leider unter der headergrafik.

so habe ich das jetzt da stehen...

Code:

<div id="header">[img]grafiken/slosh-slosh-logo.gif[/img]<span style="float:right;">Anmelden</span></div>

wie kann ich es machen das die headergrafik und der link in einer zeile sind und das die grafik links und der link rechts ausgerichtet ist??

ich habe jetzt mal so versucht

Code:

<div id="header">[img]grafiken/slosh-slosh-logo.gif[/img]<span style="right:0px;">Anmelden</span></div>

aber das war auch nicht die lösung

mfg,
destroy90210

Holger (HMR) · #4 (**permalink**) 02.01.2005, 21:39

Hilft das

Zitat:

<div id="header">
<span style"width:300px; text-align:left;" >
[img]grafiken/slosh-slosh-logo.gif[/img]
</span>
<span style"width:300px; text-align:right;" >Anmelden</span>
</div>

mike · #5 (**permalink**) 02.01.2005, 23:09

Hallo destroy90210

Ich denke mal so sollte es auch gehen:

Code:

<div id="header">
[img]grafiken/slosh-slosh-logo.gif[/img]
<span style="float:right;margin-top:10px;">Anmelden</span></div>

Wenn es dir nicht gefällt, daß "Anmelden" rechts oben in der Ecke steht,
benutze einfach die "margin" Deklaration.

Gruß Mike

destroy90210 · #6 (**permalink**) 03.01.2005, 16:19

ja thx
deines funzt mike, nur eine frage noch gibt es nicht den befehl margin-bottom??? weil wenn ich das mit bottom versuche macht der nix bei mir

mfg,
destroy90210

mike · #7 (**permalink**) 03.01.2005, 22:37

Hallo destroy90210

Wenn ein div container eine bestimmte Höhe zugewiesen bekommt, sei es durch die Angabe 'height', oder durch Einfügen eines Bildes und wie in deinem Beispiel der Befehl 'float:right' benutzt wird, dann richtet sich das Element "Anmelden" immer oben rechts aus. Deshalb ist nur der Befehl 'margin-top' und 'margin-right' ausführbar.

Gruß Mike

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Ein paar Fragen	Liquid	CSS	4	18.11.2009 20:48
Mein erstes CSS Layout	Sonriente	CSS	0	03.04.2007 01:01
CSS Layout - ist das so möglich?	berlina	CSS	18	12.02.2007 21:55
Wie findet ihr mein erstes Css layout?	Css'Benutzer	CSS	8	17.05.2006 21:28
includes bei css layout	dan	CSS	2	10.03.2004 18:21