Problem bei der Ausrichtung von "div" Ojekten mit CSS

Problem bei der Ausrichtung von "div" Ojekten mit CSS

Beitragvon Hador » 05.09.2011, 20:14

Ich gerade dabei, eine Website zu erstellen, und dabei bin ich auf ein Problem gestoßen [...]


ich wollte eigentlich mehrere "div"s, die ich im HTML Code schon definiert hatte, nebeneinander stellen, aber die Bereiche wollten sich nur nebeneinander stellen wollen. Hier der derzugehörige Code-Abschnitt:

Code: Alles auswählen
html, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {
   font-family:Arial, Helvetica, sans-serif, Veranda;
   margin:0;
   padding:0;
   border:0;
   border-collapse:collapse;
   line-height:1,2em;
}

td{padding:3px; font-size:12px;}

body{
   background-color:Goldenrod;
   text-align:center;
   background-image:url(fade_gold.gif);
   background-position:center;
   background-repeat:repeat-y;
}


#main{
   text-align:center;
   font-size:10px;
   vertical-align:top;
   border-collapse:collapse;
}
[...]
#centerpage{
   width:900px;
   position:relative;
   margin:auto;
}

#mainnav{
   text-align:left;
   font-size:15px;
   position:relative; left:-350px;
   width:200px;
   margin:auto;
   background-color:#222;
   font-weight:bold;
}

#content{
   text-align:center;
   font-size:12px;
   position:relative;
   width:500px;
   margin:0 auto;
   background-color:#050505;
   font-weight:bold;
}

#sidebar{
   text-align:left;
   font-size:12px;
   position:relative; left:350px;
   width:200px;
   margin:0 auto;
   background-color:#222;
   font-weight:bold;
}



und noch der relevante Teil des HTML-Codes:

Code: Alles auswählen
<!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" />
      <link rel="icon" href="favicon.png" />
        <link rel="stylesheet" href="main.css" />
   </head>
   <body>
            <div id="main">
               <div id="centerpage">
                    <div id="mainnav">
                  Navigation
                    </div>
                    <div id="content">
                  Inhalt
                    </div>
                    <div id="sidebar">
                  Nachrichten
          </div>
                </div>
           </div>
   </body>
</html>
Hador
neu hier
 
Beiträge: 3
Registriert: 05.09.2011, 20:04

Re: Problem bei der Ausrichtung von "div" Ojekten mit CSS

Beitragvon Hador » 05.09.2011, 20:17

Verbesserung: Ich meinte natürlich, dass die "div"s sich nur untereinander (zwar von der Seitlichen Position her an der richtig, aber trotzdem nach unten hin versetzt) stellen wollen, und nicht wie ich eigentlich möchte nebeneinander
Hador
neu hier
 
Beiträge: 3
Registriert: 05.09.2011, 20:04

Re: Problem bei der Ausrichtung von "div" Ojekten mit CSS

Beitragvon Azra » 06.09.2011, 07:12

Ich verstehe nicht was du möchtest. Die Container sind nebeneinander und was ist nun falsch?
Du kannst gerne auch englisch schreiben damit wir dich verstehen.
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
Benutzeravatar
Azra
Stammuser
 
Beiträge: 422
Registriert: 04.02.2010, 08:36
Wohnort: (Alten)bochum

Re: Problem bei der Ausrichtung von "div" Ojekten mit CSS

Beitragvon Azra » 06.09.2011, 08:00

Meinst du so?

HTML
Code: Alles auswählen
<div id="centerpage">
   <div id="mainnav">Navigation</div>
   <div id="content">Inhalt</div>
   <div id="sidebar">Nachrichten</div>
   <br class="clear">
</div>

CSS
Code: Alles auswählen
html, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {
   font-family:Arial, Helvetica, sans-serif, Veranda;
   margin:0;
   padding:0;
   border:0;
   border-collapse:collapse;
   line-height:1,2em;
}

td{padding:3px; font-size:12px;}

body{
   background-color:Goldenrod;
   text-align:center;
   background-image:url(fade_gold.gif);
   background-position:center;
   background-repeat:repeat-y;
}


#centerpage{
   width:900px;
   margin:0 auto;
}

#mainnav{
   text-align:left;
   font-size:15px;
   width:200px;
   background-color:#222;
   font-weight:bold;
   float:left;
}

#content{
   text-align:center;
   font-size:12px;
   width:500px;
   background-color:#050505;
   font-weight:bold;
   float:left;
}

#sidebar{
   text-align:left;
   font-size:12px;
   width:200px;
   background-color:#222;
   font-weight:bold;
   float:left;
}
.clear{clear:both;}

Ich denke was du gesucht hast ist float. Bevor du weiter machst solltest du lernen wie du float und clear benutzt.
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
Benutzeravatar
Azra
Stammuser
 
Beiträge: 422
Registriert: 04.02.2010, 08:36
Wohnort: (Alten)bochum

Re: Problem bei der Ausrichtung von "div" Ojekten mit CSS

Beitragvon Hador » 06.09.2011, 13:46

Vielen dank; es funktioniert jetzt.
Hador
neu hier
 
Beiträge: 3
Registriert: 05.09.2011, 20:04


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Problem bei der Ausrichtung von "div" Ojekten mit CSS"

Zurück zu: CSS für Anfänger

Wer ist online?

Mitglieder in diesem Forum: Google [Bot] und 3 Gäste