Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: Anordnung von divs im CSS-Layout

  1. #1
    Teeny
    Registriert seit
    29.03.2008
    Beiträge
    20
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Anordnung von divs im CSS-Layout

    Hallo,
    ich stehe vor einem Problem und zwar, dass das CSS-Layout nicht ganz so funktioniert wie ich es mir vorstelle.
    Ich habe mich mithilfe von Lektüre und Internetrecherche eingelesen und habe bereits Grundwissen, aber irgendwie verstehe ich das mit den divs noch nicht so wirklich.
    (Früher habe ich Layouts mit HTML-Tabellen gemacht - Asche auf mein Haupt - und diese Denkweise bekomme ich irgendwie nicht mehr weg.)

    Ich habe jetzt einfach mal eine Skizze, wie das Layout werden soll, gemacht und zeige auch mal meinen bisherigen Code (das, was funktioniert).
    Hier die Skizze:
    http://svenja-meyer.de/SkizzeLayout.jpg

    Hier der HTML-Code:
    HTML-Code:
        <div id='kasten'>        <div id='kopf'></div>        <div id='hnav'>            <ul>                <li><a href='#'>Menüpunkt 1</a></li>                <li><a href='#'>Menüpunkt 2</a></li>                <li><a href='#'>Menüpunkt 3</a></li>                <li><a href='#'>Menüpunkt 4</a></li>                <li><a href='#'>Menüpunkt 5</a></li>            </ul>        </div>    </div>    <div id='linie'></div>
    und hier der CSS-Code:
    HTML-Code:
    body {    background-color: #002f5d;    color: #000000;    font-family: Verdana;    font-size: 1em;    }
    #kasten {    background-color: #ffffff;    height: 100%;    width: 1000px;    position: absolute;    top: 0px;    left: 50%;    margin-left: -500px;    box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.7);    }
    #kopf {    background: url(topbanner.jpg) no-repeat;    height: 280px;    width: 1000px;    position: absolute;    top: 0px;    left: 50%;    margin-left: -500px;    }    #linie {    background-color: #ffffff;    height: 2px;    width: 100%;    position: absolute;    top: 280px;    left: 0px;    }    #hnav {    background-color: #5bc4f1;    width: 1000px;    position: absolute;    top: 282px;    left: 50%;    margin-left: -500px;    }    #hnav ul {    list-style-type: none;    margin: 0px;    padding: 0px;    }
    #hnav li {    float: left;    width: 200px; /* später flexibel durch PHP machen, abhängig von Anzahl der Nav-Punkte (1000px für alle) */    margin: 0px;    padding: 0px;    text-align: center;    padding: 0.6em 0em 0.5em 0em; /* top right bottom left */    height: 30px;    }
    #hnav a {    text-decoration: none;     font-variant:small-caps;    font-size: 1.3em;    color: #ffffff;    }    #hnav li:active {    background-color: #002f5d;    }
    Die horizontale Navigation und den Kopf (wobei ich das Bild noch als Bild und nicht als Hintergrund reinmachen muss, damit es auch anklickbar ist (?)) habe ich soweit hinbekommen, allerdings will es mir einfach nicht gelingen, die Spalten, die danach kommen, zu platzieren.

    Ich möchte das Layout so flexibel wie möglich gestalten, damit es auch noch gut aussieht, wenn man das Fenster verkleinert oder es auf dem Handy ansieht.
    Allerdings haben die Grafiken ja feste Pixelwerte, daher weiß ich nicht genau, inwiefern ich das überhaupt noch flexibel machen kann.
    Ist es überhaupt sinnvoll alles in divs zu verpacken?
    Ich möchte sauberen Code schreiben und so "von Anfang an" alles richtig machen.

    Ich wäre sehr dankbar, wenn mir jemand die ein oder andere Frage beantworten kann oder mir sagt, warum ich die divs "vnav" und "inhalt" einfach nicht reinbekommen habe (habe es mit position:absolute und float:left versucht...).


    Vielen Dank im Voraus!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von showtime (30.01.2014 um 10:34 Uhr)

  2. #2
    Teeny
    Registriert seit
    06.01.2014
    Beiträge
    27
    Danke
    1
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Anordnung von divs im CSS-Layout

    Hallo!

    Ich hab das jetzt nur überflogen. Achte darauf dass Du den HTML5-Standart benutzt.

    Ersetze <div id="kopf"> durch <header>.
    Das div mit der ID "linie" kannste weglassen. Dafür machst du ein border-bottom bei <header>.

    Ersetze <div id="hnav"> durch <nav id="hnav">.

    bei #kasten schreibst du anstatt
    Code:
    position: absolute;    top: 0px;    left: 50%;    margin-left: -500px;
    einfach: margin:auto;

    Die 2 Spalten baust du so ein:

    HTML-Code:
    <nav id="vnav">...</nav>
    
    <section>...</section>
    
    <div class="clear">&nbsp;</div>

    Code:
    #vnav, section{
      float:left;
    }
    
    #vnav{
      width:20%;
    }
    
    section{
      width:80%;
    }
    
    .clear{
      clear:left;
      height:0;
    }
    EDIT: Die Navigation musst du auch nicht absolut positionieren - das kannste alles rausschmeißen.
    Geändert von Kemos (30.01.2014 um 12:57 Uhr)

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    29.03.2008
    Beiträge
    20
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Anordnung von divs im CSS-Layout

    Vielen Dank schon mal!
    Ich werde das mal versuchen umzusetzen und melde mich dann wieder.
    Geändert von showtime (30.01.2014 um 15:55 Uhr)

  4. #4
    Teeny
    Themenstarter

    Registriert seit
    29.03.2008
    Beiträge
    20
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Anordnung von divs im CSS-Layout

    So, habs jetzt mal versucht umzusetzen, leider hat es nicht so toll geklappt.
    Ich hab eigentlich genau die von dir vorgeschlagenen Sachen geändert, allerdings ist jetzt die Navigation weg und die Spalteninhalte habe ich auch nicht.
    Das mit der Bottom-Linie hat leider auch nicht geklappt.

    Das einzige, was funktioniert, ist das mit dem Header. Dazu hab ich auch noch 'ne Frage: Kann ich die Sachen die bei img drin stehen, irgendwie mit in die CSS-Datei packen bzw. wenn ja wie?
    HTML-Code:
    <header><a href='#' alt='Startseite'><img src='topbanner.jpg' border='0px'></a></header>
    Weil irgendwie finde ich es inkonsequent, sowas auch teils in die HTML-Datei zu stecken.
    Mein CSS-Code zum Header:
    HTML-Code:
    header {	height: 280px;	width: 1000px;	position: absolute;	top: 0px;	left: 50%;	margin-left: -500px;	border-bottom: 2px;	border-bottom-color: #ffffff;	}

  5. #5
    Teeny
    Registriert seit
    06.01.2014
    Beiträge
    27
    Danke
    1
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Anordnung von divs im CSS-Layout

    Du siehst die Navigation nicht weil sie hinter <header> angeordnet wurde.
    Für ein einfaches Layout wie du es haben willst musst Du nichts absolut positionieren.

    Wenn du das entfernst:
    Code:
    position: absolute;	top: 0px;	left: 50%;	margin-left: -500px;
    müsste es gehen.

    Beim img-Element gibt man normalerweise neben src noch die Attribute width, height und alt an.
    Alles andere kannst du über css regeln (z.B. border)

  6. #6
    Teeny
    Themenstarter

    Registriert seit
    29.03.2008
    Beiträge
    20
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Anordnung von divs im CSS-Layout

    Hallo!
    Mir wurde schon sehr geholfen, allerdings habe ich jetzt nochmal von vorne angefangen, damit ich auch verstehe, was ich da tu.
    Ich habe jetzt folgendes gebastelt:
    http://svenja-meyer.de/gtmev/

    Eine Kleinigkeit stört mich:
    Der Bereich "verticalnav" (grün) soll so hoch wie "content" (rot) sein, also auf gleicher Höhe abschließen, auch wenn dort der Inhalt größer ist. Dasselbe soll auch umgekehrt funktionieren. Also egal, wo der Inhalt größer ist: "content" und "verticalnav" sollen auf gleicher Höhe abschließen.
    Kann mir da jemand helfen oder mach ich das komplett falsch (da ich noch ziemlich in Tabellen denke)?

    Hier der Code:
    HTML:
    HTML-Code:
    <!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <link rel="stylesheet" href="desktop.css">        </head>    <body>    <div id="wrapper"><header><img src="topbanner.jpg"></header><nav id="hnav">horizontalnav</nav><section><nav id="vnav">verticalnav</nav><div id="content">content<br>mehrzeilig</div></section><footer>footer</footer></div>
    </body></html>

    CSS:
    HTML-Code:
    body{margin:0;}
    #wrapper{width:1000px;height:100%;margin:auto;}
    header{width:1000px;height:280px;}
    #hnav{width:1000px;background-color:#8A2BE2;}
    section{width:1000px;background-color:#EE7621;}
    #vnav{float:left;width:200px;background-color:#228B22;}
    #content{float:left;width:800px;background-color:#CD3333;}
    footer{clear:both;width:1000px;background-color:#00008B;}
    edit: Hoffe, es ist nicht so schlimm, dass es jetzt die Zeilenumbrüche aus dem Code gehauen hat...

  7. #7
    Youngster
    Registriert seit
    06.02.2014
    Beiträge
    19
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Anordnung von divs im CSS-Layout

    ich denke du meinst so etwas: http://ohne-css.gehts-gar.net/demo/0031.html


    wenn nicht sag mal ausführlicher was du meinst. ich verstehe es nicht

  8. #8
    Youngster
    Registriert seit
    06.02.2014
    Beiträge
    19
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Anordnung von divs im CSS-Layout

    wie lange liesst du denn das Thema, Hier der Quellcode

    PHP-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd"
    >
    <
    html lang="de">
    <
    head>
    <
    meta http-equiv="content-type" content="text/html;
    charset=ISO-8859-1"
    >
    <
    title>Faux Columns bei fl&uuml;ssigem Layout</title>
     <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    link rel="stylesheet" type="text/css" href="../css/demo.css">
    <
    style type="text/css">
    body
    {
    background-color#fff;
    font-familyVerdanaArialsans-serif;
    font-size100.01%;
    width100%;
    height100%;
    margin0;
    padding0
    }


    #header
    {
    background-imageurl(../img/0031/mitte.jpg);
    background-repeatrepeat-x;
    background-color#618cd2;
    position:relative;
    height150px;
    }

    #header_links
    {
    background-imageurl(../img/0031/links.jpg);
    background-repeatno-repeat;
    positionabsolute;
    top0;
    left0;
    z-index1;
    width549px;
    height150px;
    }

    #header_rechts
    {
    background-imageurl(../img/0031/rechts.jpg);
    background-repeatno-repeat;
    positionabsolute;
    top0;
    right0;
    width271px;
    height150px;
    }

    #titel
    {
    positionabsolute;
    top0;
    left0;
    z-index5;
    width100%;
    }

    h1
    {
    margin0;
    line-height150px;
    font-size1.5em;
    font-weightbold;
    color#fff;
    text-aligncenter;
    }

    #wrapper1
    {
    background-imageurl(../img/0031/links.gif);
    background-position0 0;
    repeatrepeat-y;
    }

    #wrapper2
    {
    background-imageurl(../img/0031/mitte.gif);
    background-position250;
    repeatrepeat-y;
    }

    #wrapper3
    {
    background-imageurl(../img/0031/rechts.gif);
    background-position750;
    repeatrepeat-y;
    }



    #linksbox
    {
    floatleft;
    width23%;
    padding1%;
    }


    #content
    {
    floatleft;
    width48%;
    padding1%;
    }


    #rechtsbox
    {
    floatleft;
    width23%;
    padding1%;
    }

    .
    center {text-aligncenter;}


    </
    style>
    <!--
    Parameter Suchfunktion-->
      <
    script src="../searchhi.js" type="text/javascript"></script>
    <!--Ende Parameter Suchfunktion-->
    </head>
    <body>
    <div id="titel"><h1>Faux Columns bei fl&uuml;ssigem Layout</h1></div>
    <div id="header">

    <div id="header_links"></div><!--Ende header_links-->
    <div id="header_rechts"></div><!--Ende header_rechts-->


    </div><!--Ende header-->




    <div id="wrapper1">
    <div id="wrapper2">
    <div id="wrapper3">

    <div id="linksbox"><h3>Linksbox</h3>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p>

    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p>

    </div><!--Ende #linksbox-->



    <div id="content"><h3>Content</h3>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p>




    <p class="center">
    <a href="../0031.php">zur&uuml;ck zur Anleitung</a><br>
    <a href="../index.php">zur Startseite</a>
    </p>

    </div><!--Ende #content-->

    <div id="rechtsbox"><h3>Rechtsbox</h3>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p>

    </div><!--Ende #rechtsbox-->

    <div style="clear: left;"></div>

    </div><!--Ende #wrapper3-->
    </div><!--Ende #wrapper2-->
    </div><!--Ende #wrapper1-->

    </body>
    </html> 
    COPY&PASTE und ausprobieren btw. Inhalte von dir einfügen

  9. #9
    Teeny
    Themenstarter

    Registriert seit
    29.03.2008
    Beiträge
    20
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Anordnung von divs im CSS-Layout

    Ja!!!
    Vielen Dank!
    Genau das ist es!
    Bin sogar schon über das Stichwort "faux columns" gestolpert, aber ich brauch wohl immer einen Wink mit dem Zaunpfahl...

  10. #10
    Teeny
    Registriert seit
    06.01.2014
    Beiträge
    27
    Danke
    1
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Anordnung von divs im CSS-Layout

    Zitat Zitat von DerUser Beitrag anzeigen
    HTML 4.01 Transitional

    charset=ISO-8859-1
    Bei einer neuen Site? Is nicht dein Ernst oder?

Ähnliche Themen

  1. Richtige Anordnung von Divs mithilfe von float
    Von John_Thym im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 30.05.2012, 08:48
  2. Frage zur Div Anordnung
    Von Basti_rsl2 im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 01.02.2010, 02:46
  3. Layout nur mit Divs
    Von Darkxor im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 22.05.2009, 08:19
  4. Anordnung von divs abhängig von Fenstergröße?
    Von im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 12.07.2006, 18:24
  5. Anordnung
    Von !ron m@n im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 12.08.2005, 01:36

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •