[CSS] Feste Breite für Website?

Dieses Thema im Forum "Webdesign" wurde erstellt von snoggi, 3. März 2009 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 3. März 2009
    Feste Breite für Website?

    Hallo
    Ich entwickle gerade eine neue Webseite und habe ein Problem:
    Wie begrenze ich die gesamte Seitenbreite auf z.B. 900px im CSS? Momentan steht die Seitenbreiteunter header (durch <div="header"> in html), aber ich möchte diese Seitenbreite nun auf die gesamte Webseite anwenden, da ich meinen Text momentan nur in einer einzigen langen Zeile sehe und den gerne automatisch spltten würde.
    Geht sowas?
     
  3. 3. März 2009
    AW: Feste Breite für Website?

    ganz einfach: noch nen div drum rum packen (z.B. mit der id "wrapper") und gibst dem die gewünschte breite
     
  4. 3. März 2009
    AW: Feste Breite für Website?

    Jop. Wie Schmitz schon sagte einfach nen Coinatiner (z.B. #container { width:900px; }) und da dann den kompletten Inhalt rein, also vom Header über Navi bis zum Footer....Sprich ganz ausführlich:
    HTML:
    <div id="conatiner">
 <div id="header"></div>
 <div id="navi"></div>
 <div id="content"></div>
 <div id="foot"></div>
</div>
     
  5. 3. März 2009
    AW: Feste Breite für Website?

    Mit

    Kannste das ganze auch noch Zentrieren...
     
  6. 4. März 2009
    AW: Feste Breite für Website?

    Danke schonmal. Der margin-Befehl müsste dann auch in den obersten Container, oder?
     
  7. 4. März 2009
    AW: Feste Breite für Website?

    Genau.
     
  8. 4. März 2009
    AW: Feste Breite für Website?

    Klappt irgendwie nicht...

    Ich kopier euch mal den Code hier rein:

    -------HTML---------
    Code:
    <!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">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Camping Wilken</title>

<meta name="keywords" content="" />

<meta name="description" content="" />

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

</head>



<body>

<div id="seite">
<div id="header">
<div id="logo">
<table style="height: 146px;" border="0">

 <tbody>

 <tr>

 <td style="height: 142px; width: 6000px;" valign="top">
 <h1>Campingplatz Wilken</h1>

 </td>

 <td style="height: 142px;"><img alt="" style="width: 229px; height: 132px;" src="images/img01.png" /></td>

 </tr>

 </tbody>
</table>

</div>

<div id="menu">
<ul>

 <li class="active"><a href="#" accesskey="1" title="">Home</a></li>

 <li><a href="#" accesskey="2" title="">Preise</a></li>

 <li><a href="#" accesskey="3" title="">Gallerie</a></li>

 <li><a href="#" accesskey="4" title="">Umgebung</a></li>

 <li><a href="#" accesskey="5" title="">Anreise</a></li>

 <li><a href="#" accesskey="6" title="">Kontakt</a></li>

</ul>

</div>

</div>

<div id="text">
<h3>Hallo und willkommen auf dem Campingplatz Wilken</h3>
[B]testeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeefffffffffffffffffffff[/B]
</div>

</div>

</body>


</html>


    -----CSS------
    Code:
    body, h1, h2, h3, a, img {
 font-family: Trebuchet MS;
 
}

body {
 padding: 0;
 background: #FFFFFF url(images/img01.jpg) repeat-x;
 color: #000000;
 margin: 0px;
 
}


#text {
 margin: 65px 20px 65px 20px;
 font-size: 14px;
}


#seite {
 width: 900;
}

h1{
 color: #000000;

}

h2 {
 font-size: 2em;
}

h3 {
 font-size: 1.4em;
 color: rgb(51, 204, 0); 
 text-decoration: underline;
 text-align: center;
}

img {
 border: none;
 margin: -15px 0px 0px 0px
}

a {
 color: #333333;
}

a:hover {
 text-decoration: none;
 color: #000000;
}

/* Header */

#header {
 width: 900px;
 height: 150px;
 margin: 0 auto;
}

/* Logo */

#logo {
 height: 110px;
 color: #000000;
}
#logo h1 {
 float: left;
 padding: 40px 40px 0 0;
 background: url(images/img02.gif) no-repeat right center;
 letter-spacing: -2px;
 font-size: 48px;
 margin: -10px
}

#logo h2 {
 float: right;
 padding: 61px 0 0 0;
 font-size: 24px;
 
}

#logo a {
 text-decoration: none;
 color: #000000;
}

/* Menu */

#menu {
 height: 70px;
}

#menu ul {
 
 padding: 0;
 list-style: none;
 margin: 0;
}

#menu li {
 display: inline;
}

#menu a {
 display: block;
 float: left;
 width: 140px;
 height: 45px;
 padding-top: 25px;
 text-transform: lowercase;
 text-decoration: none;
 text-align: center;
 letter-spacing: -2px;
 font-size: 26px;
 color: #B8BD52;
}

#menu a:hover {
 color: #1A1A1A;
}

#menu .active a {
 background: url(images/img03.jpg) no-repeat;
 color: #FFFFFF;
}

    Das fettgedruckte ist zum testen da und soll halt nach 900px in die nächste Zeile kommen, was aber nicht klappt.
    Seht ihr zufällig, wieso?
     
  9. 4. März 2009
    AW: Feste Breite für Website?

    Setz mal bei #seite: 900px
     
  10. 4. März 2009
    AW: Feste Breite für Website?

    Bringt leider immernoch nix: Der Test-Text wird einfach durchgeschrieben...
     
  11. 4. März 2009
    AW: Feste Breite für Website?

    Dann mach mal ein Leerzeichen rein... Zusammenhängende Zeichenketten werden nicht umgebrochen...

    //
    Code:
    <!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" lang="en">
 <head>
 <title>Campingplatz Wilken</title>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 <style type="text/css">
 <!--
 body
 {
 margin:0px;
 padding:0px;
 background-color:#808080;
 }
 
 div#wrapper
 {
 width:900px;
 margin:0px auto;
 background-color:#FFF;
 }
 -->
 </style>
 </head>
 
 <body>
 <div id="wrapper">
 <div id="header">
 <h1>Campingplatz Wilken</h1>
 </div>
 
 <div id="menu">
 ....
 </div>
 
 <div id="content">
 bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa
 bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa
 bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa
 bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa bla Bla blA bLA bLA bLa
 </div>
 </div>
 </body>
</html>
     
  12. 4. März 2009
    AW: Feste Breite für Website?

    Ich ...
    Danke, dass Lehrzeichen war die Lösung.
     
  13. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.