CSS: Grafik über andere positionieren

Status
Nicht offen für weitere Antworten.
D

Dustin84

Erfahrenes Mitglied
Hallo,

ich bin totaler CSS/Html Neuling und habe eine Frage.

Mein Design:
http://img519.imageshack.us/my.php?image=wiemr3.jpg

Ich habe den Content BG per CSS in die Html Datei geladen und möchte nun dort oben links die Headline Box seperat hinzufügen und genau positionieren. (5 Pixel von der Oberkante der Contentbox und 5 Pixel von der linken Seite der Content Box)

Wie sollte ich vorgehen ?

Hier mein bisheriger HTMl Code:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jan - Protoss Eleven \______Microsite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body BGCOLOR="#eeead8">

<div id="container">
	<div id="header"></div> // ist die Headergrafik
	<div id="einleitungsbox"></div> // ist der Content BG
	<div id="web"></div>
	<div id="artworks"></div>
	<div id="fotogalerie"></div>
	<div id="misc"></div>
</div> <!-- /container -->

</body>
</html>

Und der CSS Code:

HTML: 
#header
{
height: 100%;
width: 100%;
background-image: url('header.png');
position: absolute;
background-repeat: no-repeat;
margin-top: -20px;
}

#einleitungsbox
{
height: 100%;
width: 100%;
background-image: url('einleitungbg.png');
position: absolute;
background-repeat: no-repeat;
margin-top: 280px;
}

Freue mich über jede Hilfe.

Gruß
Dustin
 
Hallo,

das klappt nicht so ganz. Mit left:50%; wird die Seiten auf einmal größer.

Und warum sind beide Scrollbalken zu sehen ? Keine der beiden Grafiken ist größer als der Bildschirmbereich oder muss ich die Seite auf 1024px x 768px definieren ?

Ich poste mal die Projektfiles.Leider nur Schrottwebspace.
http://rapidshare.com/files/30207347/micro.rar.html

EDIT: Und wie binde ich die headlinebox ein ? Auch per div und dann per CSs oder macht man das anders ?

Gruß
Dustin
 
Zuletzt bearbeitet:
left:50% hatte ich auch nicht vorgeschlagen, und dass da die Scrollbalken auftauchen, liegt wohl an der 100%-Breiten- / Höhenangabe für die beiden DIVs, gepaart mit den Polsterungseigenschaften margin / padding des Dokumentkörpers, die derzeit nicht auf null gesetzt sind.
 
Versuch es mal mit diesem Stylesheet:

Code: 
html,body {
margin: 0;
padding: 0;
}

#container {
width: 794px;
margin: 0 auto;
}

#header {
height: 297px;
background-image: url('header.png');
background-repeat: no-repeat;
background-position: center top;
}

#einleitungsbox {
width: 794px;
height: 201px;
background-image: url('einleitungbg.png');
background-repeat: no-repeat;
}
 
Beispielsweise so:

Code: 
#headlinebox {
position: relative;
top: 15px;
left: 15px;
}
Code: 
<div id="container">
        <div id="header">&nbsp;</div>
        <div id="einleitungsbox">
             <div id="headlinebox">headlinebox</div>
        </div>
        <div id="web"></div>
        <div id="artworks"></div>
        <div id="fotogalerie"></div>
        <div id="misc"></div>
</div> <!-- /container -->
 
klappt auch wunderbar, danke.

Ich hab jetzt einen Text in der ContentBox platziert, jedoch geht der Text über die gesamte Breite, der Contentbox. Wie kann ich per CSS einstellen, dass zB nach 300px automatisch ein Zeilenumbruch stattfindet ?
 
Indem du entweder den Text in ein Blockelement einbettest, und diesem eine Breite von 300px gibst, oder für die Content-Box einen entsprechenden Innenabstand padding-right bestimmst.

In letzterem Fall muss dann aber dieser padding-Wert von der Breitenangabe abgezogen werden, damit ihre Summe (Breite + Innenabstand) die gewünschte Breite der Content-Box ergibt - siehe hierzu auch Boxmodell.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück