zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden mein erstes css layout-dazu habe ich jetzt ein paar fragen:)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.12.2004, 10:49
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.11.2004
Beiträge: 59
destroy90210 befindet sich auf einem aufstrebenden Ast
Standard mein erstes css layout-dazu habe ich jetzt ein paar fragen:)

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.12.2004, 21:03
Neuer Benutzer
neuer user
 
Registriert seit: 15.12.2004
Beiträge: 17
Zwacky befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.01.2005, 10:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.11.2004
Beiträge: 59
destroy90210 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 02.01.2005, 21:39
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.11.2004
Beiträge: 343
Holger (HMR) befindet sich auf einem aufstrebenden Ast
Standard Eventuell so..

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>
Mit Zitat antworten
  #5 (permalink)  
Alt 02.01.2005, 23:09
Neuer Benutzer
neuer user
 
Registriert seit: 30.10.2004
Beiträge: 23
mike befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 03.01.2005, 16:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.11.2004
Beiträge: 59
destroy90210 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 03.01.2005, 22:37
Neuer Benutzer
neuer user
 
Registriert seit: 30.10.2004
Beiträge: 23
mike befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:15 Uhr.