Autor |
Nachricht |
Micha02
Threadersteller
Dabei seit: 04.08.2004
Ort: Hilden
Alter: -
Geschlecht:
|
Verfasst Di 10.06.2008 22:03
Titel Inhalt eines DIV Containers positionieren |
|
|
Hallo,
ich bastel gerade an einem tabellenlosen Layout meiner Homepage. Allerdings habe ich Schwierigkeiten die Navigation welche sich in einem DIV Container befindet zu positionieren. Im Firefox wird es so dargestellt wie ich es gern hätte, im IE 6 allerdings etwas versetzt. Hab schon einiges im Netz gefunden und ausprobiert allerdings kieg ich es nicht hin. Vielleicht hat hier jemand einen Rat?
MfG
So soll´s aussehen:
So siehts im IE aus:
CSS
Code: |
<style type="text/css" media="all">
body {
margin:0px;
padding:0px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#ffffff;
background-color:#000000;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:14px;
line-height:24px;
font-weight:bold;
color:#c5b985;
}
p {
font:13px/24px Georgia, "Times New Roman", Times, serif;
margin:0px 0px 16px 0px;
padding:0px;
}
a {
color:#ffffff;
font-size:11px;
text-decoration:none;
font-weight:bold;
font-family:Georgia, "Times New Roman", Times, serif;
}
a:link {color:#ffffff;}
a:visited {color:#ffffff;}
a:hover {color:#c5b985;}
#header {
position:absolute;
top:40px;
left:30px;
width:725px;
height:80px;
padding:0px;
background-image : url(./images/header.gif);
}
#menu {
position:absolute;
top:120px;
left:30px;
width:145px;
height:200px;
padding:23px 0 0 0;
text-align: right;
line-height:1.5em;
background-color:#000000;
}
#content {
position:absolute;
top:120px;
left:215px;
width:540px;
height:800px;
padding:0px;
background-color:#000000;
}
</style>
|
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mihafolio.de</title>
</head>
<body>
<div id="header">
</div>
<div id="menu">
<ul>
<a href="#">PROFIL</a>
<a href="#">PORTFOLIO</a>
<a href="#">LINKS</a>
<a href="#">KONTAKT</a>
<a href="#">IMPRESSUM</a>
</ul>
</div>
<div id="content">
<h1>WILLKOMMEN AUF MIHAFOLIO.DE</h1>
<p>Seit Januar 2004 bin ich Mediengestalter für Digital- und Printmedien in der Fachrichtung Mediendesign. Schwerpunkte meiner Arbeiten und Projekte liegen im Bereich Webdesign, Layout von Printmedien, Illustrationen und 3D Animation. Dieses Portfolio dient der Präsentation meiner gestalterischen Tätigkeit und bisher entstandener Arbeiten im Bereich Mediengestaltung.</p>
<img src="./images/line_portfolio.gif" alt="">
<h1>ARBEITEN UND PROJEKTE</h1>
<p>Ein Auszug von Arbeiten und Projekten aus verschiedenen Bereichen.</p>
</div>
</body>
</html>
|
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 10.06.2008 22:17
Titel Re: Inhalt eines DIV Containers positionieren |
|
|
Immer erstmal Browser-Defaults zurücksetzen:
Code: | * {
margin: 0;
padding: 0;
} |
Und dann wirf am besten jegliches position raus und arbeite mit float & clear (spätestens wenn ein Footer dazukommt, wirst Du merken warum).
|
|
|
|
|
Anzeige
|
|
|
signliner
Dabei seit: 12.09.2005
Ort: BaWü
Alter: 37
Geschlecht:
|
Verfasst Di 10.06.2008 22:17
Titel
|
|
|
So müsste es gehen:
CSS
Code: |
ul {
margin: 0;
padding: 0;
list-style: none;
}
|
HTML
Code: | <ul>
...
<li><a href="#">PROFIL</a></li>
...
</ul> |
|
|
|
|
|
Micha02
Threadersteller
Dabei seit: 04.08.2004
Ort: Hilden
Alter: -
Geschlecht:
|
Verfasst Di 10.06.2008 23:13
Titel Re: Inhalt eines DIV Containers positionieren |
|
|
heiko_rs hat geschrieben: | Immer erstmal Browser-Defaults zurücksetzen:
Code: | * {
margin: 0;
padding: 0;
} |
Und dann wirf am besten jegliches position raus und arbeite mit float & clear (spätestens wenn ein Footer dazukommt, wirst Du merken warum). |
Vielen Dank, das hat mir schon weitergeholfen!
Danke auch an signliner.
MfG
Micha
|
|
|
|
|
|
|
|
Ähnliche Themen |
[CSS] Problem mit dem Umbruch eines Containers
Positionieren mit CSS
Positionieren mit CSS
Div Positionieren
mittig positionieren ...
div nebeneinander positionieren
|
|