• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

graphik floaten?

C

Corraggiouno

Mitglied
Hallo,

möchte eine Graphik an meinen bestehenden nav-container "andocken".
mein htlm-code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Christian r</title>
<link href="css/cm.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<h1>Praxis für ganzheitliche Heilkunde</h1>
<div id="nav">
 <ul>
  <li><a href="home.php"><span>Home</span></a></li>
  <li><a href="leistungen.php"><span>Praxis</span></a></li>
  <li><a href="partner.php"><span>Therapie</span></a></li>
  <li><a href="stellenangebote.php"><span>Kontakt</span></a></li>
  <li><a href="kontaktformular.php"><span>Kontaktformular</span></a></li>
 </ul>
</div>

</div>
</body>
</html>

css-code:
[code]
html {
height: 100.3%;
}

body{
font-family: Verdana, sans-serif;
font-size:0.8em;
color: #000000;
}

* {
margin: 0;
padding: 0;
}

div#wrapper {
width: 900px;
margin:20px auto;
/*
border-style:solid;
border-color:#0000000;
border-width:1px;
*/
}


h1 {
background: url(../images/logo.gif) no-repeat center;
height:206px;
text-indent: -999em;
}




div#nav{
background:url(../images/nav.gif) repeat-y;
width:225px;
margin-left:10px;
height: 400px;

}

ul {

padding-left:20px;
list-style-type:none;
}

li {
padding:5px;
}
[/code]
In der Anlage befindet sich die Graphik welche ich unterhalb des Navigationsbereichs definieren möchte. Was würde ihr mir raten wie ich das am effizientesten machen kann.
Die Graphik vielleicht floaten oder einen separaten Div-container definieren?
 

Anhänge

  • bild.gif
    bild.gif
    925 Bytes · Aufrufe: 9
Wenn du damit leben kannst, dass es im IE und Opera noch keine abgerundeten Ecken gibt, würde ich dir raten, es mit CSS zu machen, denn das ist die sauberste Lösung (border-radius). Das ist aber eine CSS3 Eigenschaft, die noch nicht jeder Browser unterstützt.

Wenn du es per Grafik machen willst, damit es in jedem Browser so aussieht, wirst du um zusätzliches Markup nicht herum kommen. Wenn du es mit float hinbekommst ist es gut, aber ich denke du wirst in diesem Fall dann zusätzliche divs benötigen.
 
Hi,
wie wärs wenn du die Grafik einfach unten anhängst?

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Christian r</title>
<link href="css/cm.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<h1>Praxis für ganzheitliche Heilkunde</h1>
<div id="nav">
 <ul>
  <li><a href="home.php"><span>Home</span></a></li>
  <li><a href="leistungen.php"><span>Praxis</span></a></li>
  <li><a href="partner.php"><span>Therapie</span></a></li>
  <li><a href="stellenangebote.php"><span>Kontakt</span></a></li>
  <li><a href="kontaktformular.php"><span>Kontaktformular</span></a></li>
 </ul>
<img src="bild.jpg"/>
</div>

</div>
</body>
</html>
Oder
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Christian r</title>
<link href="css/cm.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<h1>Praxis für ganzheitliche Heilkunde</h1>
<div id="nav">
 <ul>
  <li><a href="home.php"><span>Home</span></a></li>
  <li><a href="leistungen.php"><span>Praxis</span></a></li>
  <li><a href="partner.php"><span>Therapie</span></a></li>
  <li><a href="stellenangebote.php"><span>Kontakt</span></a></li>
  <li><a href="kontaktformular.php"><span>Kontaktformular</span></a></li>
<li><img src="bild.jpg"/></li>
 </ul>

</div>

</div>
</body>
</html>
Ist zwar eigentlich eine Grafik ohne Inhalt, deshalb eigentlich über CSS und background, dann müsstest du einen neuen div hinzufügen an den Stellen wo jetzt das Bild drin ist. Sollte aber auch so gehen.

Warum du die Grafik floaten willst versteh ich nciht ganz^^

Gruß
Toast
 
Wenn die Grafik nicht zum Menu gehört, sollte man sie eigetnlich auch nicht mit ins Menu nehmen.

Wenn das Bild Inhalt enthält, also sprich etwas textliches oder ähnliches vermittelt, dann bindest du es einfach unter deinem <ul> im <div> mit ein:

HTML: 
<img src="bild.jpg" width="" height="" alt="alternativtext" />

ansonsten, wenn es zum grafischen aspekt gehört, dann gehört das ganze als CSS-Hintergrund defniert:

Code: 
#nav { background: #fff url(bild.jpg) bottom no-repeat; }

Hierbei hast du die Möglichkeit, das Ganze mit "bottom" ganz unten in dein nav-<div> zu setzen.

Allerdings solltest du auch beachten, wenn du nur ein <ul> hast, dann brauchst du kein <div>. Denn ein <div> ist dafür da, mehrere Elemente zu gruppieren. Ein <ul> ist nur ein Element.


Gruß
Loon3y
 
Hallo Corraggiouno,
hallo Loony,

Sooo eng würde ich es dann auch nicht sehen: es gibt <div>s, die man für's Layout braucht...
Diese Grafik als background für das div id="navi" (das ja sonst tatsächlich völlig überflüssig
wäre), die Hintergrundgrafik, die derzeit diesem div zugewiesen ist, für die Liste.

Grüße
Bernhard

Loon3y schrieb:
Allerdings solltest du auch beachten, wenn du nur ein <ul> hast, dann brauchst du kein <div>. Denn ein <div> ist dafür da, mehrere Elemente zu gruppieren. Ein <ul> ist nur ein Element.

Gruß
Loon3y
Zum Vergrößern anklicken....
 
Bernhard schrieb:
Hallo Corraggiouno,
hallo Loony,

Sooo eng würde ich es dann auch nicht sehen: es gibt <div>s, die man für's Layout braucht...
Diese Grafik als background für das div id="navi" (das ja sonst tatsächlich völlig überflüssig
wäre), die Hintergrundgrafik, die derzeit diesem div zugewiesen ist, für die Liste.

Grüße
Bernhard
Zum Vergrößern anklicken....

Layout wird mit CSS gemacht, nicht mit <div>.

Man könnte dem allerersten <li> die top-Grafik mit den abgerundeten Ecken zuweisen und dem <ul> die bottom-grafik mit den abgerundeten Ecken.

Andersrum wäre es auch möglich. Also von daher ist hier so gesehen kein <div> notwendig. ;)


Gruß
Loon3y
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben