Design für Layout!

Status
Nicht offen für weitere Antworten.
S

Snewi133

Mitglied
Hallo

ich habe ein Layout über divs und hier einen main Bereich!
Nun habe ich links und rechts immer den gleichen Abstand und möchte nun auf der rechten Seite immer fix ein Bild einbauen!
Wenn ich das über ein Div mache wird der mainbereich aber darunter geschoben wie mache ich es das gleichzeitig der main neben dem Bild auf der rechten seite steht?

Gruß

Seite: http://www.Snewi.de
 
Wenn ich dich richtig verstanden habe, dann solltest mal 1. hier, oder 2. da reinschnueffeln. Beim ersten kannst du die Styles 1 x 1 runterkopieren, beim zweiten ist dir erlaubt die CSS-Grundlage zu uebernehmen (siehe: Jeffrey Zeldman, Webdesign mit Webstandards, ISBN 10: 3-8273-2437-8)
Paar andere Resources (eher zum Lernen/Experimentieren):
happycog/
alistapart
----
eine wahre Ideeenmiene:
csszengarden.com
----
und eine umfangreichere Sammlung von related Links:
css-discuss.incutio.com

Hier stehen deshalb nur Links, weil das Rad schon erfunden wurde ;o) und lernen daraus schadet auf keinem Fall.

lg
josephb
 
Hi,

setz mal dieses Stylesheet ein, damit a) die mittlere und rechte Spalte nicht unterhalb der linken Navigation umgebrochen werden und b) oben keine Lücke zum Schlagschatten entsteht, was die Frage aus deinem anderen Thread beantwortet:

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

div#main
{
   width: 810px;
   text-align:left;
   background-color: #F8EDE1;
   color: black;
   position:absolute;
   left:50%;
   margin-left:-405px;
   top:0;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

div#shadow_left
{
        background: url(images/schattenli.jpg) repeat-y;
}

div#shadow_right
{
        background: url(images/schattenli.jpg) repeat-y right;
}

div#wrapper /* nimmt die vorhandenen Seitenbereiche auf */
{
        padding: 0 15px;
}

div#logo
{
   height: 175px;
   margin: 0 10px;
   margin-bottom: 1px;
   background-color: #DAC8B4;
   color: black;
}

div#navitop
{
        width: 760px;
        height: 25px;
        margin-left: 10px;
        background-color: #8B5F46;
        color: black;
}

div#topborder
{
        width:760px;
        line-height: 4px;
        margin-left: 10px;
        margin-bottom: 20px;
        border-bottom: 4px solid #8B5F46;
}

div#navileft
{
   width: 175px;
   float:left;
   margin-left: 10px;
   margin-right: 10px;
   color: black;
}

div#linie
{
        height: 600px;
        width: 1px;
        border-right: 1px solid #DAC8B4;
        float:left;
}

div#naviright
{
   width:14%;
   float:right;
   border: 1px dashed #D7D7D7;
   line-height:18px;
}

div#content
{
   margin:0 14% 0 186px;
   border: 1px dashed #D7D7D7;
   background-color: #F8EDE1;
   color: black;
}

div#footer
{
        height: 15px;
        background-color: #DAC8B4;
        color: black;
        clear:both;
        margin:0 7px;
}
und ruf im DIV #main die Klasse .clearfix auf, um die Floatumgebung zu "clearen":

Code: 
<div id="main" class="clearfix"> ... </div>
 
Hallo

danke Maik sieht nun schon besser aus :-) http://www.snewi.de

Aber jetzt fehlt ja über dem Logo der 10px Rand in weiss den ich eigentlich behalten wollte! Bekommt man das noch irgendwie hin? Und wie bekomme ich beim footer die Abstände links und rechts weg? Was macht genau die Klasse clearfix?
Dann habe ich ganz recht noch ein Div wenn ich da jetzt ein Bild reinpacke und background-atachment auf fixed setze dann wird nix angezeigt! Woran liegt das?

Fragen über Fragen trotzdem danke im voraus!

Gruß
 
Hi,

nächster Versuch:

Code: 
div#main
{
        width: 810px;
        text-align:left;
        background-color: #F8EDE1;
        color: black;
        position: absolute;
        left: 50%;
        margin-left: -405px;
        top: 0;
}

div#shadow_left
{
        background: url(images/shadow_li.png) repeat-y;
}

div#shadow_right
{
        background: url(images/shadow_re.png) repeat-y right;
}

div#wrapper /* nimmt die vorhandenen Seitenbereiche auf */
{
        padding: 0;

}

div#logo
{
        height: 175px;
        margin: 0 10px;
        margin-bottom: 1px;
        background-color: #DAC8B4;
        color: black;
        border-top:10px solid #F8EDE1;
}

div#navi_top
{
        height: 25px;
        margin: 0 10px;
        background-color: #8B5F46;
        color: black;
}

div#topborder
{
        line-height: 4px;
        margin:4px 10px 0 10px;
        border-top: 4px solid #8B5F46;
}

div#navi_left
{
        width: 175px;
        float:left;
        display:inline;
        margin-left: 10px;
        margin-right: 10px;
        color: black;
}

div#linie
{
        height: 600px;
        width: 1px;
        margin: 0 15px 25px 10px;
        border-right: 1px solid #DAC8B4;
        float: left;
        display:inline;
}

div#navi_right
{
        width:120px;
        float:right;
        display:inline;
        border: 1px dashed #D7D7D7;
        line-height:18px;
        margin-right:10px;
}

div#content
{
        margin: 0 140px 0 216px;
        border: 1px dashed #D7D7D7;
        background-color: #F8EDE1;
        color: black;
}

div#footer
{
        height:15px;
        background-color: #DAC8B4;
        color: black;
        clear: both;
        margin: 0;
        text-align:center;
}
Im class-Attribut wird der Punkt vor dem Klassennamen nicht notiert - also:

Code: 
<div id="main" class="clearfix"> ... </div>
Zudem hast du eines der vier schliessenden </div>-Tags schon nach dem Content-DIV, anstatt nach dem Footer-DIV notiert.

Die Klasse .clearfix hebt die Floatumgebung auf und sorgt so dafür, dass die umschliessende Box #main ihre tatsächliche Höhe annimmt, und vom Inhalt am unteren Elementrand nicht überlappt wird - siehe hierzu http://positioniseverything.net/easyclearing.html

Die modernen Browser "verschieben" ein Hintergrundbild nach oben, wenn es in einer Box mit background-attachment:fixed fixiert wird, denn sie fixieren ein Hintergrundbild auch ohne diese Angabe.
 
Hallo

ja aber ich möchte den footer doch ganz gerne zum Schluss setzen über die ganze Fläche ohne Rand im main Bereich und vielleicht wenn machbar ebenfalls noch einen Schatten darunter oder eben fest bis unten!
Im Firefox wird nämlich unten noch ein Rand erzeugt!

Gruß
 
Hast du meinen Code nicht vollständig übernommen?

Denn mit diesen Regeln

Code: 
div#wrapper /* nimmt die vorhandenen Seitenbereiche auf */
{
        padding: 0;

}

div#footer
{
        height:15px;
        background-color: #DAC8B4;
        color: black;
        clear: both;
        margin: 0;
        text-align:center;

}
aus meinem Stylesheet von heute Morgen besitzt der Footer überhaupt keinen Abstand zum umschliessenden DIV #main.

Die Frage, wie sich zusätzlich ein unterer Schatten einrichten lässt, wurde doch von einem anderen User in deinem Thread Seitenrand mit Schatten über div gestellt, und von mir beantwortet.
 
Hi

ok hatte die Änderung im #wrapper übersehen!
Sieht schon super aus danke für deine Geduld!

Gruß

P.S. Ach eine Kleinigkeit hätte ich noch warum wird im FF unten ein kleiner Rand erzeugt der ziemlich bescheiden aussieht?
Kann ich das noch ändern?
 
Zuletzt bearbeitet:
Snewi133 hat gesagt.:
P.S. Ach eine Kleinigkeit hätte ich noch warum wird im FF unten ein kleiner Rand erzeugt der ziemlich bescheiden aussieht?
Kann ich das noch ändern?
Zum Vergrößern anklicken....
Das hängt mit der Schriftgröße und der eingerichteten Höhe für den Footer zusammen.

Entweder keine Höhe definieren, oder sie soweit erhöhen, bis sich die Lücke zum unteren Fensterrand schliesst ;-)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück