Zweispaltiges Webdesign in der Umsetzung

CrazyLopp · 14.03.2010

Hi,

ich bin gerade dran mein Layout umzusetzten also zu coden, bin auch schon recht weit nur hänge ich gerade am content!

Wie der Titel schon sagt will ich einen zweispaltigen Content haben. Die erste Idee war es als div umzusetzten, nur hänge ich da gerade dran.

Hier ist mal der Code:

Code:

div#content {
    width:961px;
    background:#000000;
    margin:0 auto;
}

Dies ist nur für den Hintergrund des Contents!

So soll es dann aussehen:

Falls ihr einen tipp habt immer her damit, jedoch wäre es nett wenn ihr das leicht verstänlich ausdrücken könnt da ich nicht der beste im coden bin

Lieben Gruß
Crazylopp

leveler · 14.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

hi, ich denke, Du koenntest es mit 2 div`s machen, dem ersten gibst du ein "float:left;", dem 2. ein "float: right;", danach am besten ein <br id="clearer" /> einbauen, in der cssdann fuer den #clearer {clear: both; height: 1px; overflow: auto; } ..so koennt`s wohl funzen;

CrazyLopp · 14.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

Das hab ich jetzt nicht so ganz verstanden :uhm:

also soll es so aussehen?

Code:

#clearer {
    clear: both; 
    height: 1px; 
    overflow: auto;
}

div#content {
    width:961px;
    background:#000000;
    margin:0 auto;
}

div#content div#content1 {
    width:400px;
    float:left;
}
 
div#content div#content2 {
    width:400px;
    float:right;
}

Herr_D · 14.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

Wenn es ein Fließtext (zuammenhängender Text) werden soll, dann überleg dir das nochmal mit den 2 Spalten... User scrollen erfahrungsgemäß nur ungern

Ansonsten, wie leveler es beschrieben hat...

Code:

#content {
    width:961px;
    background-image:url(adresse);
    margin:0 auto;
}


#content .links {
    width:50%;
    background:transparent;
    float:left;
    margin:0;
    padding:1em;; }


#content .rechts {
    margin:0;    
    margin-left: 50%;
    padding:1em;
    }

.freierWille {
    clear:both;
    }

HTML:

<div id="content">
     <div class="links"></div>
     <div class="rechts"></div>
     <div class="freierWille"></div>
</div>

CrazyLopp · 14.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

Also das hat irgendwie nicht geklappt :uhm:

Das sieht nun so aus:

Hier ist der Code(Css):

Code:

* {
    margin:0;
    padding:0;
    border:0;
}

html {
    background-color:#949494; 
}

body {
    font:62.5%/1.8em "Times New Roman", verdana, arial, sans-serif;
    color:#fff;
    background:url(../grafiken/bg-body.gif) 0 0 repeat-x;
}

.noBorder {
    border:0!important;
}

.noMargin {
    margin:0!important;
}

.freierWille {
    clear:both;
}
    
/* ------------------------- */

div#headerContainer {
    width:100%;
    background:url(../grafiken/bg-header-container.png) center 0 no-repeat;
}

div#headerContainer div#header {
    width:961px;
    height:329px;
    background:url(../grafiken/bg-header.png) 0 0 no-repeat;
    margin:0 auto;
    position:relative;
}

/* ------- End of Header ------ */

div#headerContainer div#header ul#navi-top {
    position:absolute;
    list-style:none;
    top:2px;
    left:54px;
}

div#headerContainer div#header ul#navi-top li {
    float:left;
    padding:0 15px;
    border-right:1px solid #bfbfbf;
    line-height:12px;
    text-transform:uppercase;
}

div#headerContainer div#header ul#navi-top li a {
    color:#bfbfbf;
    text-decoration:none;
}

div#headerContainer div#header ul#navi-top li a:hover,
div#headerContainer div#header ul#navi-top li.active a {
    text-decoration:none;
    color:#fff;
}

/* ------- End of navi-top ------ */

div#headerContainer div#header ul#navi {
    position:absolute;
    top:275px;
    left:194px;
    list-style:none;
}

div#headerContainer div#header ul#navi li {
    padding:0 125px 0 0;
    float:left;
    text-transform:uppercase;
}

div#headerContainer div#header ul#navi li a {
    color:#bfbfbf;
    font:18px "Times New Roman", verdana, arial, sans-serif;
    text-decoration:none;
}

div#headerContainer div#header ul#navi li a:hover,
div#headerContainer div#header ul#navi li.active a {
    color:#fff;
    font:18px "Times New Roman", verdana, arial, sans-serif;
    text-decoration:none;
}

/* ------- End of navi ------ */


div#content {
    width:961px;
    background:#000000;
    margin:0 auto;
}

#content .links {
    width:50%;
    background:url(../grafiken/bg-content.gif);
    float:left;
    margin:0;
    padding:1em;
}


#content .rechts {
    margin:0;
    background:url(../grafiken/bg-content.gif);
    margin-left:50%;
    padding:1em;
}

Und so in der Html:

<div id="content">
<div class="links">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div class="rechts">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div class="freierWille">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
</div>

Herr_D · 14.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

Schriftfarbe ist weiß?

Das hat geklappt... in freier wille kommt natürlich kein Text, das ist nur, um zu clearen (den Fluss wieder herzustellen... bei den anderen beiden div ist weißer Text auf weißem hintergrund schlecht zu lesen

Wenn das HGBild den rechts und links zuordnest, dann mußt du halt auch 'ne Höhe angeben oder eben den div content den HG verpassen...

CrazyLopp · 14.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

Aber wie bekomme ich es denn nun so hin das die beiden kleiner werden also von der breite, die höhe soll sich ja automatisch anpassen...

Und wie kann ich eine neue Schriftfarbe für den Content bestimmen, wenn ich einfach colore:#000000; eingebe bring das nicht...

Aber danke schonmal für die Hilfe

Lieben gruß
Crazylopp

Herr_D · 14.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

Ah so...

gib mal .links und .rechts color:#000 !important; (color nicht colore)

und dann könntest du da aus dem margin: 0; 10px oder so machen, was du brauchst... Außenabstand halt ... weite dann 961/2-20px

dann kannst du padding: auch wechlassen (innenabstand)

Code:

div#content {
    width:961px;
    background:#000000;
    margin:0 auto;
}

#content .links {
    width:460px;
    background:url(../grafiken/bg-content.gif);
    float:left;
    margin:10px;
    color:!important;
}


#content .rechts {
    width:460px;
    background:url(../grafiken/bg-content.gif);
    float:right;
    color:!important;
}

Könnte sein, dass du für den IE die weiten etwas anpassen mußt...

Morgen mehr, Madame brüllt schon :motz:

CrazyLopp · 14.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

Cool das hat nun schon mal geklappt...

Nur ein Problem besteht noch und zwar möchte ich innerhalb der contents (also recht und links) noch einen Abstand haben sodas der Text nicht genau am rand sich befindet...
Nur wie immer weiß ich nicht so genau wie, oder ich werde blind, habe es schon mit border versucht aber das will irgendwie nicht so ganz funktionieren...

dragobert · 14.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

"noch einen Abstand haben sodas der Text nicht genau am rand sich befindet.."
...
Margin
Padding

CrazyLopp · 14.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

Vielen dank, man sowas nennt man wohl dann auf dem Schlauch stehen

daddaa · 14.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

In dem Fall wohl padding.

Bei .rechts und .links jeweils z.B. "padding: 10px;" oder je nach Belieben unterschiedliche Angaben für oben/unten bzw. die Seiten.

edit: border hilft dir da nicht weiter

(bzw. vllt schon mit gleicher Farbe, das ist aber sicher nicht im Sinne des Erfinders...)

CrazyLopp · 14.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

Ohh man heute ist aber der Wurm drinnen, nun sieht ja alles schonmal ganz gut aus, jedoch wenn ich jetzt einen etwas längeren Text habe dann verlängert sich ja der content (also content.rechts) jedoch nicht der normale content, also der schwarze Hintergund :hmpf:

Lieben Gruß
Crazylopp

daddaa · 15.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

genau dafür sollte eigentlich das clear-Element da sein...

Wo hast du das genau eingebunden?

Kannst du nochmal deinen jetzigen Stand des Quelltextes hochladen oder posten? wäre eine große Hilfe um zu helfen

CrazyLopp · 15.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

Code:

* {
    margin:0;
    padding:0;
    border:0;
}

html {
    background-color:#949494; 
}

body {
    font:62.5%/1.8em "Times New Roman", verdana, arial, sans-serif;
    color:#fff;
    background:url(../grafiken/bg-body.gif) 0 0 repeat-x;
}

.noBorder {
    border:0!important;
}

.noMargin {
    margin:0!important;
}

.clearer {
    clear:both;
}
    
/* ------------------------- */

div#headerContainer {
    width:100%;
    background:url(../grafiken/bg-header-container.png) center 0 no-repeat;
}

div#headerContainer div#header {
    width:961px;
    height:329px;
    background:url(../grafiken/bg-header.png) 0 0 no-repeat;
    margin:0 auto;
    position:relative;
}

/* ------- End of Header ------ */

div#headerContainer div#header ul#navi-top {
    position:absolute;
    list-style:none;
    top:2px;
    left:54px;
}

div#headerContainer div#header ul#navi-top li {
    float:left;
    padding:0 15px;
    border-right:1px solid #bfbfbf;
    line-height:12px;
    text-transform:uppercase;
}

div#headerContainer div#header ul#navi-top li a {
    color:#bfbfbf;
    text-decoration:none;
}

div#headerContainer div#header ul#navi-top li a:hover,
div#headerContainer div#header ul#navi-top li.active a {
    text-decoration:none;
    color:#fff;
}

/* ------- End of navi-top ------ */

div#headerContainer div#header ul#navi {
    position:absolute;
    top:275px;
    left:194px;
    list-style:none;
}

div#headerContainer div#header ul#navi li {
    padding:0 125px 0 0;
    float:left;
    text-transform:uppercase;
}

div#headerContainer div#header ul#navi li a {
    color:#bfbfbf;
    font:18px "Times New Roman", verdana, arial, sans-serif;
    text-decoration:none;
}

div#headerContainer div#header ul#navi li a:hover,
div#headerContainer div#header ul#navi li.active a {
    color:#fff;
    font:18px "Times New Roman", verdana, arial, sans-serif;
    text-decoration:none;
}

/* ------- End of navi ------ */


div#content {
    width:961px;
    background:#000000;
    margin:0 auto;
    font:11px "Times New Roman", verdana, arial, sans-serif;
    color:#000000;
    position:relative;
}

#content .links {
    width:570px;
    padding:15px;
    background:#bfbfbf;
    float:left;
    margin:20px;
    top:75px;
    color:#000000;
    position:absolute;
}


#content .rechts {
    width:230px;
    padding:15px;
    background:#bfbfbf;
    float:right;
    margin:20px;
    color:#000000;
}

daddaa · 16.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

Versuch es mal ohne das "position:absolute;" bei #content .links, das hebt das Element aus dem Textfluss und Layout heraus. Zur Not kannst du das auch über relative machen, aber es müsste schon auch so gehen (geht ja beim rechten Bereich auch).
Dazu dann auch noch "top:75px;" rausnehmen und das über margin erledigen.

Hoffe, das hilft, ansonsten wärs gut, auch mal das html zu haben, dann kann ich es mir ganz ansehen und z.b. mit Firebug untersuchen.

CrazyLopp · 16.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

Ich ahbe mal die componenten auf meinen server gelegt, somit kann man es sich auch real ansehen : rene-w.de

Ich versuche es mal so wie du es gesagt hast

Lieben Gruß
Crazylopp

daddaa · 17.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

Scheint doch funktioniert zu haben.
Wenn noch was unklar ist, einfach nochmal fragen

Gruß, daddaa

CrazyLopp · 20.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

Also richtig funktinoiert hat es leider nicht, nur weil ich im HTMl document immer leere Tag geschreiben habe zieht der Content (also der schwarze hintergrund nach unten)

Also dies war im HTML Dokument auf den Clearer bezogen

daddaa · 21.03.2010

AW: Zweispaltiges Webdesign in der Umsetzung

Du hast bei <div class="textbox"> immernoch das position:absolute drin!!!!

Nehm das raus, dann geht alles wunderbar und du kannst dir die Leerzeichen sparen.

Ist genau das, was ich oben gesagt, bzw. gemeint habe