Autor |
Nachricht |
lexk
Threadersteller
Dabei seit: 11.11.2007
Ort: Fürth
Alter: 35
Geschlecht:
|
Verfasst Do 19.03.2009 19:23
Titel 2 Divs auf Seite zentrieren |
|
|
Guuuten Abend,
ich habe ein kleines Problem, ich steh aufm Schlauch und komme garnicht weiter.
Ich brächte folgendes:
mein Code wäre:
HTML:
Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testseite</title>
<link href="white.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">content</div>
<div id="right">right</div>
</body>
</html>
|
CSS:
Code: |
body {
text-align: center;
background-color:#DDD;
}
body div {
margin: 0 auto;
}
#content {
width:800px;
height:100%;
background-color:#FFF;
}
#rechts {
width:200px;
height:100%;
float:left;
background-color:#FFF;
}
|
habe gehoft mir hier die 2 zu zentrieren, allerdings klappt das mit dem "right" nicht so wie ich mir das vorgestellt habe, da er nicht neben den anderen passt...wo liegt denn mein denkfehler.
Hatte auch den Einfall beide wiederum in einen DIV zu packen, allerdings wirkt sich ja das "body div" auf alle divs aus.
achja trenner soll einfach freiraum zwischen den divs sein und ich wollte kein workaround mit weisem balken etc.
und präventiv:
CS4 MC + WinXP
ah, bitte helft mir ich bin jung und brauche die hilfe!
Zuletzt bearbeitet von lexk am Do 19.03.2009 19:25, insgesamt 2-mal bearbeitet
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Do 19.03.2009 19:34
Titel
|
|
|
soll der trenner immer bis zum unteren Bildschirmrand ragen?
und soll deine seiten eine breite von 1000px haben?
denn dann könntest du einen wrapper um deine elemente setzen und diesem eine hintergrundgrafik geben, die diesen trennstrich simuliert.
stichwort hierzu: faux-columns
ansonsten sieh dir bitte auch die Float-Regeln an
Zuletzt bearbeitet von Kash am Do 19.03.2009 19:37, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
lexk
Threadersteller
Dabei seit: 11.11.2007
Ort: Fürth
Alter: 35
Geschlecht:
|
Verfasst Do 19.03.2009 19:56
Titel
|
|
|
ja der trenner sollte bis zum ende durchgehen und nein die seite soll 1005px haben (+5px Trenner).
mmmhh, gerade so eine lösung wollte ich vermeiden. war echt als 2 divs gedacht.
aber wenn es nicht anders geht, werde ich es wohl so machen :-/
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 19.03.2009 19:59
Titel
|
|
|
lexk hat geschrieben: | mmmhh, gerade so eine lösung wollte ich vermeiden. war echt als 2 divs gedacht.
aber wenn es nicht anders geht, werde ich es wohl so machen :-/ |
siehe mein Beitrag
|
|
|
|
|
lexk
Threadersteller
Dabei seit: 11.11.2007
Ort: Fürth
Alter: 35
Geschlecht:
|
Verfasst Do 19.03.2009 20:02
Titel
|
|
|
den hatte ich da noch nicht gesehen - habe ich wohl zu langsam getippt.
danke mit deinen bin weitergekommen! mal schauen, ob ich das jetzt auch hinbringe ^^
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Do 19.03.2009 21:25
Titel
|
|
|
super Links m
|
|
|
|
|
lexk
Threadersteller
Dabei seit: 11.11.2007
Ort: Fürth
Alter: 35
Geschlecht:
|
Verfasst So 22.03.2009 17:02
Titel
|
|
|
naja mit einem kleinen workaround bin ich jetzt weiter gekommen.
Jetzt habe ich aber gleich wieder das nächste Problem:
Die Navigation wird mit imagereplacement realisiert, zumindest war es so angedacht.
Allerdings habe ich vertikale statt eine horizontale Liste mit dots.
Die einfachsten Dinge bringen mich anscheinend zu Verzweiflung - diverse Seite mit dem Thema hab ich bereits abgeklappert...
HTML
Code: | <div id="container" style="margin:auto">
<div id="links"><img src="images/logo.png" alt="Logodingens" class="logo" /><br />
<ul class="navi">
<li><a href="#">Link 1</a></li>
<li id="navigation2"><a href="#">Link 2</a></li>
</ul>
</div>
<div id="rechts"><img src="images/news.png" alt="News" width="69" height="16" class="news" /><br />
</div>
</div>
</body>
</html> |
CSS
Code: | body {
background-color:#eee;
margin: 0px;
background-image:url(images/wrapper.gif);
background-position:center;
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
color:#333;
}
#container {
width:950px;
height:100%;
position:relative;
}
#links {
width:690px;
position:absolute;
padding-left:15px;
background-color:#FFF;
}
#rechts {
width:225px;
position:absolute;
margin-left:710px;
padding-left:15px;
background-color:#FFF;
}
/* ############ NAVI ############ */
ul li a{
display:block;
height:16px;
width:55px;
background:transparent url(images/navi_replace.png) no-repeat 0 0;
text-indent:-509px;
}
ul li#navigation2 a {
width:54px;
background-position: -55px 0;
}
ul li a:hover {
background-position: 0 -16px;
}
ul li#navigation2 a:hover {
background-position: -54px -16px;
} |
Wo häng ich denn da?!
Zuletzt bearbeitet von lexk am So 22.03.2009 17:06, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
Divs auf Seite fest zentrieren
DIVs zentrieren
[css] divs nebeneinander zentrieren
Zentrieren von floating DIVs
3 DIVs im übergeordnetem DIV zentrieren & fixieren? HELP!
Mehrere floatende DIVs zentrieren...
|
|