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

fragen zu layout mit css

C

Conti93

Neues Mitglied
nabend zsm,

ich habe jetzt endlich die zeit gefunden meine website von den frames zu erlösen und das layout mit css zu machen. Nun stehe ich vor dem ersten problem. Die navi hab ich jetzt fertig aber sie hört sofort nach dem letzten link auf, das passt mir aber überhaupt nicht. so sieht die css aus:
div#navi {
position: absolute;
margin: 0%;
padding: 0%;
width: 200px;
height: auto;
background-image: url(../img/bg/navi.png)
Zum Vergrößern anklicken....

kann mir da wer helfen? height auf 100% is müll da wird die seite viel zu lang.
 
Wenn Du mit CSS beginnst fange nicht mit dem Fehler an alles absolut positionieren zu wollen. Dadurch trifft man erst recht auf Probleme, so wie du jetzt. Problem bei dir ist, dass ein absolut positioniertes Blockelement eine Breite und Höhe haben sollte. Du gibst keine solche an, also sieht es etwas merkwürdig aus.
 
Denke zunächst über die Reihenfolge im HTML-Code nach. Positioniere die Elemente am Besten so wie man sie im Browser sehen sollte. Mit der CSS-Eigenschaft float kannst Du einzelne Blockelemente dann nebeneinander setzen. Höhen- und Breitenangaben helfen weiter.
 
ok das hat jetzt geklappt. das problem mit der größe des divs besteht aber immer noch. es soll genau bis an den unteren rand reichen also das man nix weißes mehr sieht auch wenn bis dahin kein inhalt mehr ist und es sollte mit dem div daneben bündig abschließen wenn der länger wird. geht sowas?
hier mal die gesamte css:
html {
height: 100%;
}
body {
height:100%;
margin:0%;
padding:0%;
}
div#links {
float: left;
text-align: center;
margin: 0%;
padding: 0%;
height: 180px;
width: 200px;
background-image: url(../img/bg/links.png)
}
div#rechts {
text-align: center;
margin: 0%;
padding: 0%;
height: 180px;
background-image: url(../img/bg/rechts.png)
}
div#navi {
float: left;
margin: 0%;
padding: 0%;
width: 200px;
height: auto;
background-image: url(../img/bg/navi.png)
}
div#main {
float: right;
margin: 0%;
padding: 0%;
height: auto;
background-color: #D39856;
}
Zum Vergrößern anklicken....
 
Klar. Die Frage ist aber was Du vom Design her genau damit erreichen willst. Geht es nur um eine Hintergrundfarbe schau dich mal nach "Faux Columns" um. Evtl. könnte es auch helfen für alle Elemente auf dem Weg von <html> zu deiner Navigation "height: 100%; zu definieren. Hängt aber wie gesagt von deinem Ziel ab.
 
ich hab die hintergrundgrafik vom body einfach 2000px breit gemacht und senkrecht immer wiederholen lassen jetzt geht das. eine frage hab ich für heute noch.
Ich brauche zwischen einem text und einem bild einen Abstand von 50px. früher hätte ich das mit tabellen gemacht aber ich wills ja richtig machen nur fällt mir da so spontan nix zu ein. mit float hat das iwie nich hingehauen kann mir wer nen tip geben?
 
Den seitlichen Abstand bestimmst du mit margin-left oder margin-right.
Damit der Text neben das Bild kommt, weist du dem Bild am besten ein float: left oder float: right zu.
Beispiele findest du hier: Text zu Bildern anordnen
 
so hat jetzt funktioniert aber gibt es in css sowas wie platzhalter? früher hatte ich einfach ne tabellenzeile genommen und die z.B. 50px breit gemacht aber ohne inhalt. gibt es sowas für css auch also das es wirklich die selbe höhe hat wie der linke text so das der nich nach rechts rausrakt?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben