Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Zweispaltiges Webdesign in der Umsetzung“

CrazyLopp

Hat es drauf

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 :D


Lieben Gruß
Crazylopp
 

leveler

00110100 00110010

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

Hat es drauf

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

offline

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

Hat es drauf

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

offline

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

Hat es drauf

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
 
Zuletzt bearbeitet:

Herr_D

offline

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

Hat es drauf

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

Nicht mehr ganz neu hier

AW: Zweispaltiges Webdesign in der Umsetzung

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

daddaa

pro-newbie

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

Hat es drauf

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

pro-newbie

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 :D
 

CrazyLopp

Hat es drauf

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

pro-newbie

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

Hat es drauf

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

pro-newbie

AW: Zweispaltiges Webdesign in der Umsetzung

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

Gruß, daddaa
 

CrazyLopp

Hat es drauf

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

pro-newbie

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 ;)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.224
Neuestes Mitglied
Aliyah79
Oben