| Autor |
Nachricht |
siocone
Threadersteller
Dabei seit: 14.07.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 14.07.2008 21:26
Titel Div horizontal nebeneinander ? |
  |
|
hi, habe wohl nen kleinen fehler den ich leider nicht behoben bekomme aber auch nicht ganz verstehe:
ich habe einen zentrierten div mit einem header grafik unter dieser soll die navigation und der inhlat plaziert werden "Relative"
mein problem:
mit der navi klapt das nur leider nicht mit dem inhalt den müste ich mit Top:-XY; positionieren weil der sonst mitten in der page landet: das muss doch anders zu lösen sein...
| Code: | body {
background-color: #FFFFFF;
background-image:url(background.gif);
}
#base {
margin:0 auto; width:770px;
background-color:#FFFFFF;
background-image:url(header.gif); background-repeat:no-repeat;
border: 1px solid #7ea65a;
}
#Navigation {
position: relative;
top: 150px;
left: 10px;
width: 200px;
background-image:url(verlauf.gif); background-repeat:no-repeat;
border: 1px solid #7ea65a;
}
#Navigation h1 {
font-weight: bold;
color : #FFFFFF;
font-size: 18px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
margin: 5px;
}
#Inhalt {
position: relative;
[b] top: 150px;[/b]
width:10px
border: 1px solid #7ea65a;
} |
|
|
| |
  |
 |
xBe
Dabei seit: 04.06.2006
Ort: Mönchengladbach
Alter: 34
Geschlecht: 
|
Verfasst Mo 14.07.2008 21:34
Titel
|
|
|
wenn ich dich richtig verstanden habe, suchst du nach float...
/// edith spricht:
| 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=iso-8859-1" />
<title>float</title>
</head>
<body style="text-align:center">
<div style=" margin:0 auto; text-align:left; width:700px">
<div style="float:left; width:120px; height:500px; background-color:#FF0000;">Box Eins</div>
<div style="float:left; width:400px; height:500px; background-color:#00FF00;">Box Zwei</div>
<div style="float:left; width:100px; height:500px; background-color:#0000FF;">Box Drei</div>
</div>
</body>
</html>
|
So sind die Boxen horizontal nebeneinander, meinste sowas?
Zuletzt bearbeitet von xBe am Mo 14.07.2008 21:41, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
siocone
Threadersteller
Dabei seit: 14.07.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 14.07.2008 21:43
Titel
|
|
|
hemm hört sich zwar gut an habe ich auch schon mal gehört aber wie bekomme ich mit float die beiden nebeneinander ?
also: #Navigation und #Inhalt
also von oben sollen beide gleich höhe bekommen aber horizontal nebeneinander !!!
|
|
| |
|
|
siocone
Threadersteller
Dabei seit: 14.07.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 14.07.2008 21:46
Titel
|
|
|
|
OPS schon gut den quell code kam zu spät DANKE
|
|
| |
|
|
xBe
Dabei seit: 04.06.2006
Ort: Mönchengladbach
Alter: 34
Geschlecht:
|
Verfasst Mo 14.07.2008 21:48
Titel
|
|
|
| siocone hat geschrieben: | | OPS schon gut den quell code kam zu spät DANKE |
Damit es so ist wie du es willst, dann müsstest du die erste zeile ersetzen durch:
| Code: | | <div style="top:10px; width:500px; height:100px; background-color:#FF0000;">Box Eins</div> |
Dann nimmst du den Header aus dem Fluss raus"!
// gute Bildqualität, Paint ist schon echt ein gutes Programm
Zuletzt bearbeitet von xBe am Mo 14.07.2008 21:51, insgesamt 2-mal bearbeitet
|
|
| |
|
|
theGRUNGEone
Dabei seit: 14.12.2005
Ort: Leipzig | Essen
Alter: 39
Geschlecht: 
|
Verfasst Mo 14.07.2008 22:00
Titel
|
|
|
hast du nen container um die beiden?
floaten so:
navi- und inhalts-div auf eine breite
anpassen, auf die sie innerhalb der
box um beide passen (ggf etwas
schmaler) und dann beide nach links
floaten (ich halte das in diesem fall
für angemessen). das clearen nicht
vergessen.
auszug aus der html (wesentlicher teil *hust  ):
| Code: |
<div id="mitte">
<div id="navi">navi</div>
<div id="inhalt">inhalt</div>
<div id="clearer"> </div>
</div>
|
auszug aus dem css:
| Code: |
#mitte {
width: 600px;}
#navi {
width: 150px;
float: left;}
#inhalt {
width: 445px; /*ca., musste probieren*/
float: left;}
#clearer {
clear: left;}
|
Zuletzt bearbeitet von theGRUNGEone am Mo 14.07.2008 22:02, insgesamt 2-mal bearbeitet
|
|
| |
 |
|
siocone
Threadersteller
Dabei seit: 14.07.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 14.07.2008 22:21
Titel
|
|
|
Jetzt habe ich nur noch chaos
Also noch mal 
[/quote]
| 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>test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="base">
<div id="Navigation">
<H1>Navigation</H1>
<p><a href="#test">Startseite</a></p>
<p><a href="#test">1</a></p>
<p><a href="#test">2</a></p>
<p><a href="#test">3</a></p>
<p><a href="#test">4</a></p>
</div>
<div id="Inhalt">
<h1>Überschrift des Dokuments</h1>
</div>
</div>
</body>
</html> |
hier das CSS
| Code: | body {
background-color: #FFFFFF;
background-image:url(background.gif);
}
#base {
margin:0 auto; width:770px;
background-color:#FFFFFF;
background-image:url(header.gif); background-repeat:no-repeat;
border: 1px solid #7ea65a;
}
#Navigation {
position: relative;
top: 150px;
left: 10px;
width: 200px;
background-image:url(verlauf.gif); background-repeat:no-repeat;
border: 1px solid #7ea65a;
}
#Navigation h1 {
font-weight: bold;
color : #FFFFFF;
font-size: 18px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
margin: 5px;
}
#Inhalt {
position: relative;
width:10px
border: 1px solid #7ea65a;
} |
|
|
| |
|
|
theGRUNGEone
Dabei seit: 14.12.2005
Ort: Leipzig | Essen
Alter: 39
Geschlecht:
|
Verfasst Mo 14.07.2008 22:37
Titel
|
|
|
was hat position: relative; da zu suchen?
gib beiden erst mal eine feste breite und
nimm vorerst alle elemente raus, die das
irgendwie beeinflussen können. genauso
raus mit dem position: relative;
die breite beider boxen darf dann (zum
schluss mit margin und padding) in deinem
fall höchstens eine breite 770px besitzen
(mit border entsprechende pixel weniger).
zusammen!
warum? damit die beim floaten nocht unter-
einander rutschen.
setz statt der position das float rein und
cleare (wie in meinem bsp) mit einem
leeren div die boxen (damit die nachfol-
genden nicht hinterher rutschen.
verständlich?
mein bsp da ist das einfachste, bau das
mal so ein. den rest kannst du ja nach-
schieben.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
table und img nebeneinander und beides horizontal zentriert
Navigation Horizontal mit CSS
[CSS] Horizontal Scrollen
[CSS] 100% horizontal Scrollbar im FF?
css display bei horizontal
DIV nebeneinander
|
|
Willkommen auf dem Portal für Mediengestalter
