Autor |
Nachricht |
nickdesign
Threadersteller
Dabei seit: 28.02.2007
Ort: South London
Alter: 43
Geschlecht:
|
Verfasst So 16.01.2011 16:34
Titel CSS / im wrapper liegendes BG Bild, auf bottom platzieren? |
|
|
Irgendwie steh ich gerade auf der Leitung...
ich bekomme das BG Bild nicht auf den bottom gelegt, das problem is, ich möchte das der Content bei mehr Text später größer wird, demnach soll das Bild links (Indian Head Massage), auch immer unten stehen - seitlich - .
Code noch nicht fertig, mir geht es jetzt erstmal nur um das Bild links, daher ist auch noch kein footer zu sehen.
Hier der Link für die Vorschau
http://jsfiddle.net/WD7mD/3/
Code HTML
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>-</title>
<head>
</head>
<body>
<div id="distance"></div>
<div id="wrapper">
<div id="logo">
<a href="" alt="">
<img src="images/logo/logo.png" alt="#"/></a>
</div>
<div id="navigation">
<ul>
<li><a href="#" class="nav" title="#" alt="">START</a></li>
<li><a href="#" class="nav" title="#" alt="">WHAT WE DO</a></li>
<li><a href="#" class="nav" title="#" alt="">WOMAN</a></li>
<li><a href="#" class="nav" title="#" alt="">MEN</a></li>
<li><a href="#" class="nav" title="#" alt="">CONTACT</a></li>
</ul>
</div>
<div id="start_boxes">
<div class="box_left"></div>
<div class="box_middle"></div>
<div class="box_right"></div>
</div>
</div>
</body>
</html> |
CODE CSS (Gekürzt)
Code: |
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-image:url(images/bg/bg.png);
background-repeat:repeat;
color:#630;
font:100.01%/1.4 sans-serif;
text-align:center; /* horizontal centering for IE Win quirks */
}
#distance {
width:1px;
height:50%;
background-color:#fc6;
margin-bottom:-13.75em; /* half of container's height */
float:left;
}
#wrapper {
background-image:url(images/bg/text-bg.png);
background-repeat:no-repeat;
margin:0 auto;
position:relative; /* puts container in front of distance */
text-align:left;
height:auto;
width:870px;
padding:0 20px 20px 20px;
clear:left;
}
#wrapper h1 {
font-size:18px;
padding: 22px 22px 0px 60px; //* Oben -> Rechts -> Unten -> Links *//
}
....
#wrapper p {
padding: 22px 22px 20px 60px; //* Oben -> Rechts -> Unten -> Links *//
}
#logo {
text-align:center;
height:280px;
width:auto;
}
#navigation {
margin-top:30px;
height:26px;
border-bottom:1px solid #000;
margin-left:60px;
width:750px;
}
.nav {color:#999999; }
.nav:hover {color:#993399; }
/* STARTSEITE BOXEN */
#start_boxes {
margin-top:25px;
}
.box_left {
background-image:url(images/startpage/start_left.png);
margin-left:25px;
float:left;
height:465px;
width:280px;
background-repeat: no-repeat;
}
.box_middle {
background-image:url(images/startpage/start_middle.png);
float:left;
height:465px;
width:280px;
background-repeat: no-repeat;
}
.box_right {
background-image:url(images/startpage/start_right.png);
margin-left:-10px;
float:left;
height:465px;
width:280px;
background-repeat: no-repeat; |
...
Zuletzt bearbeitet von nickdesign am So 16.01.2011 16:45, insgesamt 1-mal bearbeitet
|
|
|
|
|
trashmaster
Dabei seit: 20.01.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 16.01.2011 17:12
Titel
|
|
|
Wenn du dem #wrapper noch background-position:left bottom; gibst und das Floating der DIVs in #start_boxes aufhebst, sollte es schon klappen. (Dafür z.B. overflow:hidden; oder die Clearfix-Klasse verwenden, oder hinter die drei DIVs noch ein DIV mit clear:left; packen)
Die Background-Eigenschaften könnte man auch alle direkt in eine Zeile schreiben: Code: | background:url(http://www.patrick-krisch.de/kunden/lawes/images/bg/text-bg.png) bottom left no-repeat; |
Zuletzt bearbeitet von trashmaster am So 16.01.2011 17:13, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
nickdesign
Threadersteller
Dabei seit: 28.02.2007
Ort: South London
Alter: 43
Geschlecht:
|
Verfasst So 16.01.2011 17:23
Titel
|
|
|
Danke dir
hat alles geklappt, wünsche dir noch n schönes rest Wochenende
|
|
|
|
|
|
|
|
Ähnliche Themen |
hinter wrapper schatten / bild
Wrapper soll sich 100% der Höhe des Contents anpassen...
illustrator 10 >> darunter liegendes objekt aufteilen ...
OnClick ein neues drunter liegendes Text-, Bildfeld
[CSS] Div bottom anordnen
div am am seiten-bottom feststehend !
|
|