• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

positionen bestimmen...

P

Parallax

Neues Mitglied
So nun hab ich mein Layout hinbekommen...
(siehe Thread: Html Seite aufbauen)

und zwar folgendermaßen:

div.logo { font-family:Arial;
width:1000px;
height:100px;
background-color:#FFFFFF;
margin-top:50px;
margin-left:100px;
margin-right:0px;
margin-bottom:0px;
}


div.navi { width:100px;
height:100%;
background-color:#FFFFFF;
margin-top:5px;
margin-left:100px;
margin-right:0px;
margin-bottom:5px;
float:left;
}

div.text { width:800px;
height:100%;
background-color:#FFFFFF;
margin-top:5px;
margin-left:5px;
margin-right:0px;
margin-bottom:5px;
float:left;
}

div.right { width:90px;
height:100%;
background-color:#FFFFFF;
margin-top:5px;
margin-left:5px;
margin-right:0px;
margin-bottom:5px;
float:left;

}

div.unten { width:1000px;
height:50px;
background-color:#FFFFFF;
margin-top:0px;
margin-left:100px;
margin-right:0px;
margin-bottom:30px;
clear:left;

}

das mit dem float und clear hab ich zwar net richtig verstanden aber es funzt....

so mein ziel ist nun folgendes: der rand auf den seiten also sprich der margin left von 100px soll nicht fest sein sondern sich je nach fenstergröße ändern.... was ich auch noch festgestell hab ist das wenn ich auflösung nach unten stell verschieben sich die elemente... also sind die positionen irgendwie nicht fest... aber das sollten sie sein, denn bei einer kleinen auflösung verschiebt sich ja alles aufs schlimmste.... mit was muss ich weiter arbeiten und was sollte ich tun....

Mfg
Parallax

PS: ich hab nun mal die datein angehängt.... damit sie jeder mal anschauen kann....

also ich kenne die positionierung nur von visual basic... und wenn ich da positionen fest lege und als rahmen art dialog dann ist das alles fest und der kann auflösungen verändern was er will... schlimmstenfalls passts einfach nich mehr aufs fenster aber da verschiebt sich nix und so... ich versteh irgendwie net ganz wie des in CSS funktionieren soll....
 

Anhänge

Zuletzt bearbeitet:
Prozentangaben.
Gib überall statt der Pixelangabe ne Prozentangabe an, in der art wie width:100%;.
Damit kannst du erreichen dass die Seite mitschrumpft/wächst.


MfG
 
Herzlichen Dank,

hat wunderbar funktioniert...

und habe schon wieder ein weiteres Problem:

nun da dies endlich funktioniert und ich mittlerweile auch begriffen habe wie float funktioniert hab ich das ganze nun im internet explorer angeschaut....

der firefox zentriert mir meine divs und die seiten ränden variieren sich...

im IE (v6) wird die seite allerdings linksbündig dargestellt...

nun habe ich nachgelesen den doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

zu verwenden...

ok der IE zentriert nun, aber die height:100% werden nun ignoriert....

der Firefox tut das gleiche und vergisst im gegensatz zum IE nun auch noch margin-bottom.....

außerdem stellt der IE unabhängig vom Doc type das div.logo, was ich in ein H1.logo umgewandelt hab falsch da, nämlich mit größerem abstand wie angegeben....

des is doch zum kinder kriegen... wenn die browser schon bei so einfachen dingen rum zicken, was passiert dann erst wenns komplexer wird...

Weiß jemand einen guten Rat und einen geeigneten Doc Type


mfg
Parallax
 
die css datei konnte erfolgreich validiert werden...

das html doc wurde ebenfalls erfolgreich validiert, allerdings hat er 2 warnungen....

und zwar

No Character encoding declared at document level

No Character Encoding Found! Falling back to UTF-8.

was das heißen soll is mir unbekannt... können diese warnungen etwas damit zu tun haben...?
 
Überall, wo du keine Abstände haben willst, solltest du margin und padding auf 0 setzen, da die Browser sonst ihre voreingestellten Werte nutzen und die variieren von Browser zu Browser.

Zu sauberem Arbeiten wirst du mit diesem Doctype gezwungen
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 
ich habe nun den angegebenen doctype strict benutzt, alle fehler behoben (is ja sehr kleinlich. meckert über H1 statt h1)

die html seite und die css datei wurden validiert....

allerdings ist height:100%; immer noch nicht funktional....

und IE zeigt immernoch unter h1 mehr abstand an als es angegeben ist...

ich poste noch mal beide codes

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<title> Test Seite </title>

<link rel="stylesheet" type="text/css" href="main.css"/>

</head>

<body>

<h1 class="logo"> hallo welt </h1>
<div class="mitte">
<div class="navi"> navi </div>
<div class="text"> text </div>
<div class="right"> right </div>
</div>
<div class="unten"> unten </div>





</body>
</html>


CSS:

* {
margin:0px;
padding:0px;
background-color:#AAAAAA;


}




H1.logo { font-family:Arial;
width:1000px;
height:150px;
background-color:#FFFFFF;
margin:auto;
margin-top:25px;
}

div.mitte { width:1000px;
height:100%;
background-color:#AAAAAA;
margin:auto;
margin-top:5px;
margin-bottom:5px;
}


div.navi { width:125px;
height:100%;
background-color:#FFFFFF;
margin:auto;
float:left;
}

div.text { width:775px;
height:100%;
background-color:#FFFFFF;
margin:auto;
margin-left:5px;
float:left;
}

div.right { width:90px;
height:100%;
background-color:#FFFFFF;
margin:auto;
margin-left:5px;
float:left;

}

div.unten { width:1000px;
height:50px;
background-color:#FFFFFF;
margin:auto;
clear:left;

}

für heute bin ich verwirrt genug ich schau in ner stunde noch mal rein...
danke schon mal und bis später

Parallax
 
Tags werden nunmal klein geschrieben, deshalb musst du sie auch im CSS klein schreiben, dann sollte auch der Abstand unter der Überschrift verschwinden.
 
hab ich übersehen....

ok der abstand is nun weg... aber immernoch keine lösung für das problem dass height:100% nicht interpretiert wird....

ich poste noch mal die neuen datein als zip... dann kannst du sie dir auf deinem rechner anschauen... evtl hab ich was übersehen was ich einfach net check....

noch glei ne weitere frage:
ich bräuchte noch n nettes programm mit dem ich logos und so erstellen kann... also im prinzip n gutes paint.... wenns geht freeware.. wenns net geht auch net so tragisch....

danke für eure mühe
 

Anhänge

Parallax schrieb:
ich poste noch mal die neuen datein als zip... dann kannst du sie dir auf deinem rechner anschauen... evtl hab ich was übersehen was ich einfach net check....
Zum Vergrößern anklicken....

Hallo Parallax,

sinnvoller ist, Du lädst Deine Site hoch (z.B. bei bplaced.net), dann haben es
diejenigen, die Dir helfen wollen, leichter...

Parallax schrieb:
noch glei ne weitere frage:
ich bräuchte noch n nettes programm mit dem ich logos und so erstellen kann... also im prinzip n gutes paint.... wenns geht freeware.. wenns net geht auch net so tragisch....

danke für eure mühe
Zum Vergrößern anklicken....

wenn's net so tragisch ist: Photoshop (ab CS2)
wenn's Freeware sein soll: Gimp (hab ich aber keine eigenen Erfahrungen)

Grüße
Bernhard
 
danke danke....

hab schon den fehler gefunden... die sache is das die container nur die maximal höhe des übergeordneten elements annehmen... ergo universal die höhe auf 100% gesetzt und nun werden auch die einzelnen container auf 100% gestreckt...

jo ich probiers mal mit photoshop....

nun versuch ich mal die navigation hin zu bekommen... da wurde mir geraten eine liste zu verwenden (wegen der sinnhaftigkeit der html anweisung)...
aber die liste an sich klatsch ich dann schon in ein div rein oda??

so einfach wie alle sagen is das mit dem css und html nun auch wieder net fällt mir so langsam auf


schönen abend noch
 
Parallax schrieb:
jo ich probiers mal mit photoshop....
Zum Vergrößern anklicken....

Ist eine Kostenfrage - von Cracks o.ä. rate ich Dir ab.

Parallax schrieb:
nun versuch ich mal die navigation hin zu bekommen... da wurde mir geraten eine liste zu verwenden (wegen der sinnhaftigkeit der html anweisung)...
aber die liste an sich klatsch ich dann schon in ein div rein oda??

so einfach wie alle sagen is das mit dem css und html nun auch wieder net fällt mir so langsam auf

schönen abend noch
Zum Vergrößern anklicken....

ich denke, das dauert ein paar Tage, bis Dir auffällt, dass es vieles sehr erleichtert.
Manches ist aber auch nach Jahren noch zum Haareraufen...;-)

Warum willst Du die Liste in ein div klatschen?

Du kannst jedem Element die Eigenschaften geben, die Du ihm geben möchtest.

Halte Deinen HTML-Code so schlank wie möglich, verwende das Tag, das am
ehesten dem Sinn des Inhalts entspricht.

Grüße
Bernhard
 
ok sah nur ohne formatierung so unnatürlich aus... hat einwandfrei funktioniert...

danke....

ja dann mach ich mal weiter mit logos gestalten, usw usw....

wird dann mit der zeit scho werden...

mfg
Parallax
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben