Arbeite zum ersten mal mit #Divs - einige Anfängerfragen

xmatthias

Hallo Leute!

Ich selbst würde mich als "fortgeschrittener Anfänger" im HP erstellen bezeichnen und hab immer ein paar dumme fragen parat

Mein Problem ist, ich sollte für eine Hobby eine Website erstellen, früher hab ich sowas ganz einfach (und hässlich) im Frontpage mit Frames erstellt. Nun probiere ich schon eine weile mit MS Expression Web herum und muss sagen ich komme eig. ganz gut zurecht. Wo ich leider noch nicht wirklich durchblicke ist mit den #Divs anstatt der Frames.

Ich meine, ich bekomme zwar die Divs in der Größe usw. wie ich sie will, nur wenn ich eine verschachtelte Seite machen will (sprich mehrere Divs neben/untereinander) krieg ich arge Probleme .
Ich kapier das mit den ausrichtungen der einzelen Divs nicht wirklich.

Ich wäre wirklich sehr sehr dankbar wenn mir hier wer ein bisschen auf die Sprünge helfen würde. Ich kann auch gerne mal "das bisschen" das ich schon habe posten.

Vielen Dank, lg

Bandit

Hier mal die Beispiele ansehen: http://www.css4you.de und http://www.ohne-css.gehts-gar.net/

synaptic

dann möchte ich dir auch noch einige stichwörter mit auf den weg geben

feste breite u variable höhe, float, boxmodell

von dingen wie position halte dich anfangs am besten noch etwas fern
und wenn du konkrete fragen hast, so stell sie einfach, wir leisten jederzeit hilfe zur selbsthilfe
codes gibt es ab und an auch mal, aber das is immer abhängig von der zeit, die der antwortende hat

Bandit

Allerdings sinkt die Hilfsbereitschaft bei Crosspostings (Frage in mehreren Foren gestellt) relativ drastisch!

xmatthias

Hallo.

Erstmal vielen Dank für die rasche Rückmeldung. Bzgl. Crossposting entschuldige ich mich, das wusst ich nicht, kommt auch nichtmehr vor sry.

Also zu meinem Problem, ich wesentlichen sollte die Seite so aufgebaut sein wie im Bild ersichtlich.

[Blockierte Grafik: http://www.bilder-space.de/show_img.php?img=d6f8a4-1272886271.jpg&size=thumb]

Probleme hab ich jetzt zb. Damit, dass er untere div (der schmale grüne horizontale Balken) nicht wirklich passt, sprich er raussteht

Ausserdem weiß ich nicht wie ich es anstelle, das wenn mehr Inhalt im "Mittelteil" (grau) steht alles in die Länge mitgeht, sprich der linke grüne div unter der navigation sowie natürlich der graue inhalts div sollten sich sozusagen dehnen. möche nicht im grauen div einen scrollbar oder so.

Danke für die Bemühungen, lg

synaptic

du brauchst ein div als header, eins für die navi, eins für den content und alles wird von einem wrapper (umschliessndes div) ummantelt.

wenn du in den unteren grünen streifen noch was reinpacken möchtest brauchste da auch nochma nen div und musst leider, damit es unten bleibt, doch mit position arbeiten.
siehe: http://www.ohne-css.gehts-gar.net/0044.php

die navi und der content bekommen ein float:left und eben margin-abstände, zusätzlich noch ne feste breite in px oder %.

xmatthias

super, vielen dank für die antwort.

ich werd mal "rummurksen" und melde mich dann wieder.

vielen dank, lg

Bandit

Du kannst dir als Anfänger unmöglich in 20 Minuten dies angesehen haben http://www.css4you.de/wslayout1/index.html und dann damit experimetiert haben.

xmatthias

Kann es sein das ich meine Site von grund auf schon verpfuscht habe?
Ich bin wie gesagt noch ziemlich "neu" was divs betrifft und befürchte ich hab einige grundlegende Fehler im Aufbau die mir jetzt das Leben schwer machen.

Wie gesagt ich arbeite mit MS Expression Web. Hier hat man eine Masterfile zozusagen indem man den Aufbau festlegen kann und darauf dann schnell und einfach andere Seiten generieren kann die das seleb Design haben.

Ich hab hier mal den Aufbau meiner Masterdatei:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- #BeginEditable "doctitle" -->
<title></title>
<!-- #EndEditable -->
<link href="styles/style1.css" media="screen" rel="stylesheet" title="CSS" type="text/css" />
<style type="text/css">
</style>
</head>


<body>


<!-- Begin Container -->
<div id="container">
    <!-- Begin Masthead -->
    <div id="header">
        <h1> MR </h1>
        <h3>Fam.</h3>
    </div>
    <!-- End Masthead -->
    <!-- Begin Navigation -->
    <div id="navigation">
        <ul>
            <li><a href="default.html">Home</a></li>
            <li><a href="anschrift/anschrift.htm">Anschrift</a></li>
            <li><a href="anfahrt/anfahrt.htm">Anfahrt</a></li>
            <li><a href="kontakt/kontakt.htm">Kontakt</a></li>
            <li><a href="hengste/hengste.htm">Hengste</a></li>
            <li><a href="stuten/stuten.htm">Stuten</a></li>
            <li><a href="fohlen/fohlen.htm">Fohlen</a></li>
            <li><a href="galerie/galerie.htm">Galerie</a></li>
        </ul>
    </div>


    <!-- End Navigation -->
    <!-- Begin Content -->
    <div id="content">
        <!-- #BeginEditable "content" -->
        <h2>Heading 2</h2>
        <p>insert content here</p>
        <!-- #EndEditable "content" -->
    <!-- End Content -->
    <!-- Begin Footer -->
    <p>&nbsp;</p>
    </div>

    <div id="unternavi">
        </div>

    <div id="footer">
        MR | Adresse | Mail
    </div>

    <div id="unterfooter">
        <a href="default.html">Home</a> | 
        <a href="anschrift/anschrift.htm">Anschrift</a> |
        <a href="anfahrt/anfahrt.htm">Anfahrt</a> | 
        <a href="kontakt/kontakt.htm">Kontakt</a> | 
        <a href="hengste/hengste.htm">Hengste</a> |
        <a href="stuten/stuten.htm">Stuten</a> |
        <a href="fohlen/fohlen.htm">Fohlen</a> | 
        <a href="galerie/galerie.htm">Galerie</a>
    </div>
    <!-- End Footer --></div>
<!-- End Container -->


</body>


</html>

Alles anzeigen

Sowie die Styles die ich definiert habe:

Code

@import url("layout.css");
body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    background-image: url("../images/background.gif");
    background-repeat: repeat;
    background-attachment: scroll;
}
#container {
    width: 950px;
    height:700px;
    background-color:#CCCCCC;
    margin: 0 auto;
    padding: 4px;
    border: medium;
    border-color:#CC9900;
}


#header {
    text-align: center;
    width: 942px;
    height:150px; 
    background-color: #02B57A; 
    background-image:none;
    padding: 4px;
}


#navigation {
    float: left;
    width: 125px;
    height:255px;
    margin-top: 0px;
    margin-bottom: 0px;
}


#unternavi {
    float:left;
    width: 125px;
    height:252px;
    margin-top: 0px;
    margin-bottom: 0px;
}


#content {
    width:807px;
    height:487px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    float:right;
}


#footer {
    text-align: center;
    background-color: #02B57A;
    clear: both;
    width: 942px;
    height:35px;
    font-family:"Traditional Arabic";
    font-size:small;
    color:black;  
    padding-top:10px    
}


#unterfooter {
    text-align: center;
    clear: both;
    width: 942px;
    height:35px;
    font-family:"French Script MT";
    font-size:large;
    color:#CC9900;   
    padding:4px;     
}




/* Masthead Styles */
#header h1 {
    color: #C48B06;
    font-family:"Kunstler Script";
    font-size:80px;
    font-weight:bolder;

}
#header h3 {
    color: black;
    font-family:"Kunstler Script";
    font-size:35px;
    font-weight:bold;


}
/* Navigation Styles */
#navigation ul {
    list-style-type: none;
    display: block;
    margin: 0;
    padding: 0;

}
#navigation li {
    display: block;
    margin: 0;
    padding: 0;
    background-color:#CC9900;
}
#navigation a {
    height:20px;
    color:black;
    text-decoration:none;
    display: block;
    padding: 5px;
    background-color: #CC9900;
    border: 1px dotted #02B57A;
    font-family:"French Script MT";
    font-size:large;
}
#navigation a:hover {
    color: #402640;
    text-decoration: none;
    background-color: #02B57A;
}
/* Content Styles */
#content h1,h2,h3,h4,h5,h6 {
    color: #503750;
}
#content img {
    padding: 5px;

}
/* Footer Styles */
#footer p {
    color: #808080;
}
#footer a {
    color: #503750;
    text-decoration: underline;
}
#footer a:hover {
    color: #402640;
    text-decoration: none;
}
a {
    color: #402640;
    text-decoration: underline;
}
a:hover {
    color: #dfb8df;
    text-decoration: underline;
}
.style_bold {
    font-weight: bold;
}
.style_italic {
    font-style: italic;
}

Alles anzeigen

Lg

Bandit

Simples Beispiel (ungetestet)

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body
{
   background-color: #00ffff;
}
.wrapper
{
   background-color: #00ff00;
   margin: 0 auto;
   width:900px;
}
.header
{
   height: 100px;
   background-color: #ffff00;
}
.menu
{
   width: 10%;
   float: left;
}
.content
{
   width:85%;
   padding: 5px;
   background-color: #c9c9c9;
   float: right;
}
.footer
{
   clear:both;
   background-color: #ff0000;
   height: 30px;
}
</style>
</head>
<body>
<div class="wrapper">
  <div class="header">Der Header</div>
  <div class="menu">
    Menu 1<br />
    Menu 2<br />
    Menu 3<br />
    Menu 4<br />
    Menu 5<br />
    Menu 6<br />
    Menu 7<br />
  </div>
  <div class="content">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
  tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
  vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
  no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
  amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
  labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
  et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
  sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
  magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
  et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
  dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
  esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
  et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
  augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
  consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
  laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
  nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
  consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
  accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
  augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
  eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
  assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
  vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
  no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
  consetetur
  </div>
  <div class="footer">Footer</div>
 </div>
 </body>
</html>

Alles anzeigen

xmatthias

also vorweg mal, HAMMER

Du hast in wenigen Zeilen das vom Style her festgelegt, das ich auf fast einer A4 Seite versucht hab

Aber mal 2 Fragen:

1. du hast ja den wrapper mit 900px eine fest breite gegeben (ist logisch) aber warum passen sich auch header und footer an die breite an obwohl die bei denen nirgends festgelegt wurde?

2. bewirkt das float das dynamische? sprich das der Inhalt und das Menü sich mit dem Inhalt mitdehnen?

Nochmals vielen Dank

Bandit

Ein Tipp: benutze den Firefox und installiere die Addons WebDeveloper und Firebug, damit wird dir einiges klarer, besonders mit Firebug

xmatthias

hey super danke, die beiden tools sind echt hilfreich. hab damit jetzt auf die schnelle schonmal einen groben murks in meinem entwurf gefunden (hatte den container auch eine fixe höhe definiert, da war klar das er sich nicht "mitdehnen" würde)

was meinst du jetzt zu meinem "entwurf" wenn man das überhaupt so nennen darf. macht es sinn den beizubehalten und zu korrigieren, oder wäre ein neuanfang eher "leichter" für mich?

Danke, lg

Bandit

Ich würde an deiner Stelle neu anfangen und Stück für Stück erweitern. So fallen dir Fehler leichter auf, als direkt mit einer großen Baustelle zu beginnen.

xmatthias

echt lieb von dir meine "murksbaustelle" als große baustelle zu bezeichnen
ist für dich sicher ein fisch :D:D

ich werd aber auf alle fälle deinen rat befolgen und neu beginnen.

vielen dank soweit, wir hören uns sicher wieder

lg

xmatthias

eine grundlegende frage hab ich jetzt allerdings noch.

nur so vom gedanken her ob das so gemacht wird.

also:

1. definiere ich mir einen div als container wo später alles drin ist
2. definiere ich mir die einzelnen divs mit fixen größen bis auf die beiden die "mitwachsen" sollen
3. erstelle ich mir zb. für den header dann einfach eine grafik die exakt so groß ist wie der div und füge sie als hintergrund ein

dann sollte es schonmal nach einer website aussehen, oder?

synaptic

1) jein, du definierst container wo der inhalt reinkommt, aber auch container um mehrere container zu positionieren (also wie zb navi und content im wrapper) oder du hast bestimmte infoboxen nebeneinander und die sollen dann zwischen content und footer

2) ja und nein man definiert in der regel feste breiten, es gibt aber auch momente wo man komplett fixe werte braucht

3) ja

ich dulde jetzt mal dein doppelposting zur kenntlichmachung neuer informationen, aber in zukunft vermeide bitte doppelpostings und nutz bitte die editfunktion

xmatthias

ok, das mit dem doppelpost merk ich mir natürlich, danke für dulden

zu meinem vorhaben

mal wieder ne ganz dumme frage, ABER wenn ich nun den container bzw. wrapper mache, wie macht man das normal, ich meine gibt man dem eine feste breite und höhe? oder macht man die höhe flexibel damit sie mit dem inhalt mitgeht. ich meine ist es schöner / "normaler" wenn der container variabel ist und somit in der höhe mit dem inhalt mitgeht und man im browserfenster scrollen kann, oder wäre eine feste höhe und eine scrollmöglichkeit innen schöner / besser?

danke lg

synaptic

feste breite und variable höhe...
scrollbalken mitten in der seite sieht kagge aus

xmatthias

wenn ich den wrapper jetzt so definiere

Code

.wrapper
{
   background-color: #00ff00;
   margin: 5px;
   width:900px;
}

ist er dann (da ich ja nichts bzgl. höhe angebe) in der höhe automatisch flexibel, oder muss ich ihm das sagen?

lg

EDIT:

Habs jetzt mal soweit hinbekommen und schon fast alles was ich will
Hab nur noch ein positionsproblem mit dem footer. falls ichs alleine nicht pack meld mich mich wieder

Vielen dank mal für die nette und schnelle hilfe hier.

lg

EDIT2 ich kriegs nicht hin, 2 probleme

1. ich kann den div - unternavi nicht dahin positionieren wo er sein soll (sollte wie der name sagt unter dem navi div sein, da da vl. eine grafik hin sollte)
2. ich kann den div - footer nicht dahin positionieren wo er sein sollte ( sollte ganz unten im contaier div sein, so das das grüne rechteckt unten anliegt bzw. die 4 px abstand hat und der text darunter sollte schon draußen sein, also ca. 2cm weiter runter.

derzeit schauts so aus und ich kriegs nicht hin

[Blockierte Grafik: http://j.imagehost.org/0720/probleme.jpg]

Meine code sieht so aus.

HTML:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- #BeginEditable "doctitle" -->
<title></title>
<!-- #EndEditable -->
<link href="styles/style1.css" media="screen" rel="stylesheet" title="CSS" type="text/css" />
<style type="text/css">
</style>
</head>


<body>


<!-- Begin Container -->
<div id="container">
    <!-- Begin Masthead -->
    <div id="header">
        <h1> MR </h1>
        <h3>Fam.</h3>
    </div>
    <!-- End Masthead -->
    <!-- Begin Navigation -->
    <div id="navigation">
        <ul>
            <li><a href="default.html">Home</a></li>
            <li><a href="anschrift/anschrift.htm">Anschrift</a></li>
            <li><a href="anfahrt/anfahrt.htm">Anfahrt</a></li>
            <li><a href="kontakt/kontakt.htm">Kontakt</a></li>
            <li><a href="hengste/hengste.htm">Hengste</a></li>
            <li><a href="stuten/stuten.htm">Stuten</a></li>
            <li><a href="fohlen/fohlen.htm">Fohlen</a></li>
            <li><a href="galerie/galerie.htm">Galerie</a></li>
        </ul>
    </div>


    <!-- End Navigation -->
    <!-- Begin Content -->
    <div id="content">
        <!-- #BeginEditable "content" -->
        <h2>Heading 2</h2>
        <p>insert content here</p>
        <!-- #EndEditable "content" -->
    <!-- End Content -->
    <!-- Begin Footer -->
    <p>&nbsp;</p>
    </div>

    <div id="unternavi">
        unternavi</div>

    <div id="footer">
        MR | Adresse | Mail
    </div>

    <div id="unterfooter">
        <a href="default.html">Home</a> | 
        <a href="anschrift/anschrift.htm">Anschrift</a> |
        <a href="anfahrt/anfahrt.htm">Anfahrt</a> | 
        <a href="kontakt/kontakt.htm">Kontakt</a> | 
        <a href="hengste/hengste.htm">Hengste</a> |
        <a href="stuten/stuten.htm">Stuten</a> |
        <a href="fohlen/fohlen.htm">Fohlen</a> | 
        <a href="galerie/galerie.htm">Galerie</a>
    </div>
    <!-- End Footer --></div>
<!-- End Container -->


</body>


</html>

Alles anzeigen

und CSS

Code

@import url("layout.css");
body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    background-image: url("../images/background.gif");
    background-repeat: repeat;
    background-attachment: scroll;
}
#container {
    width: 950px;
    background-color:#CCCCCC;
    margin: 15px auto;
    padding: 4px;
    border: medium;
    border-color:#CC9900;
}


#header {
    text-align: center;

    height:150px; 
    background-color: #02B57A; 
    background-image:none;

}


#navigation {
    float: left;
    width: 125px;
    height:255px;
    margin-top: 0px;
    margin-bottom: 0px;
}


#unternavi {
    float:left;
    width: 125px;
    margin-top: 0px;
    margin-bottom: 0px;
}


#content {
    width:807px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    float:right;
}


#footer {
    text-align: center;
    background-color: #02B57A;
    width: 942px;
    height:35px;
    font-family:"Traditional Arabic";
    font-size:small;
    color:black;  


}


#unterfooter {
    text-align: center;
    width: 942px;
    height:35px;
    font-family:"French Script MT";
    font-size:large;
    color:#CC9900;   

}




/* Masthead Styles */
#header h1 {
    color: #C48B06;
    font-family:"Kunstler Script";
    font-size:80px;
    font-weight:bolder;

}
#header h3 {
    color: black;
    font-family:"Kunstler Script";
    font-size:35px;
    font-weight:bold;


}
/* Navigation Styles */
#navigation ul {
    list-style-type: none;
    display: block;
    margin: 0;
    padding: 0;

}
#navigation li {
    display: block;
    margin: 0;
    padding: 0;
    background-color:#CC9900;
}
#navigation a {
    height:20px;
    color:black;
    text-decoration:none;
    display: block;
    padding: 5px;
    background-color: #CC9900;
    border: 1px dotted #02B57A;
    font-family:"French Script MT";
    font-size:large;
}
#navigation a:hover {
    color: #402640;
    text-decoration: none;
    background-color: #02B57A;
}
/* Content Styles */
#content h1,h2,h3,h4,h5,h6 {
    color: #503750;
}
#content img {
    padding: 5px;

}
/* Footer Styles */
#footer p {
    color: #808080;
}
#footer a {
    color: #503750;
    text-decoration: underline;
}
#footer a:hover {
    color: #402640;
    text-decoration: none;
}
a {
    color: #402640;
    text-decoration: underline;
}
a:hover {
    color: #dfb8df;
    text-decoration: underline;
}
.style_bold {
    font-weight: bold;
}
.style_italic {
    font-style: italic;
}

Alles anzeigen

Das gibts ja garnicht

Arbeite zum ersten mal mit #Divs - einige Anfängerfragen

Tags

Benutzer online in diesem Thema