Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 24

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

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

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

    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
    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 !!!!!

  2. #2
    Bandit
    Gast

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

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

  3. #3
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

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

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  4. #4
    Bandit
    Gast

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

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

  5. #5
    Teeny
    Themenstarter

    Registriert seit
    03.05.2010
    Beiträge
    30
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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.



    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

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

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

    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 %.
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  7. #7
    Teeny
    Themenstarter

    Registriert seit
    03.05.2010
    Beiträge
    30
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    super, vielen dank für die antwort.

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

    vielen dank, lg

  8. #8
    Bandit
    Gast

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

    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.

  9. #9
    Teeny
    Themenstarter

    Registriert seit
    03.05.2010
    Beiträge
    30
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

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

    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;
    }
    Lg
    Geändert von synaptic (03.05.2010 um 15:25 Uhr) Grund: codetags für bessere lesbarkeit nachgetragen!

  10. #10
    Bandit
    Gast

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

    Simples Beispiel (ungetestet)
    HTML-Code:
    <!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>

Ähnliche Themen

  1. anfängerfragen
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 22.06.2009, 15:09
  2. Anfängerfragen
    Von Alienx im Forum Forum für alle anderen Programmiersprachen
    Antworten: 2
    Letzter Beitrag: 21.10.2008, 21:08
  3. PHP Anfängerfragen usw.
    Von Alucard im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 7
    Letzter Beitrag: 09.10.2008, 02:18
  4. Anfängerfragen ...
    Von marada im Forum HTML & CSS Forum
    Antworten: 19
    Letzter Beitrag: 31.10.2007, 01:32
  5. Neues Layout, ein paar Anfängerfragen... ;)
    Von gaedingar im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 31.12.2006, 13:05

Stichworte

Berechtigungen

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