Willkommen in der Webstatt Zum Webstatt Blog und Stories
tnY am 24.09.06 16:31

Hi leute,

also mein erstes css design hat soweit ganz gut geklappt nur der richtet das im menü net in der mitte aus und ich weiß auch net wie das geht.. bin neuling in css ^^

und gleichzeitig noch die frage:
kann ich machen das die menü box genau so lang is wie die content box ohne das ich denen beiden feste längen gebe?

netcup.de Warum gibt es hier Werbung?
crooked am 24.09.06 17:12

rück am besten mal den code raus :)
dann gehts direkt besser
aber versuch mal für die elemente in der navi:
margin:0px auto;

tnY am 24.09.06 17:22

hat nicht geholfen hier der code:

guckt bei Links von menu


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
background-color: #323f4e;
}

#links{
width:192px;
float:left;
}

#loben{
background-color:#394b61;
width:183px;
height:74px;
border-width:1px;
border-color:#6e8aa8;
border-style:solid;
margin-left:3px;
margin-bottom:3px;
margin-top:3px;
}

#lmitte{
background-image:url(index_06.gif);
width:194px;
height:54px;

}

#lunten{
background-color:#394b61;
width:183px;
height:433px;
border-width:1px;
border-color:#6e8aa8;
border-style:solid;
margin-left:3px;
margin-top:3px;
}

#menubanner{
background-image:url(design-september45_09.gif);
width:183px;
height:38px;
}

#menu_spalte{
width:183px;
height:28px;
font-family:Verdana;
font-size:18px;
color: #ffffff;
}

#button_links{
background-image:url(design-september45_11.gif);
width:11px;
height:28px;
float:left;
}

#button_marked{
background-image:url(design-september45_12.gif);
height:28px;
width:172px;
float:right;
}

#button_unmarked{
background-image:url(design-september45_14.gif);
height:28px;
width:172px;
float:right;
}

#rechts{
width:712px;
float:left;
}

#roben{
background-image:url(index_04.gif);
width:100%;
height:222px;
}

#runten{
height:auto;
}

#titel{
border-bottom:1px solid #323f4e;
height:28px;
background-color:#627893;
padding-left:5px;
margin: 0px 0px 0px 0px;
font-family:"Arial Black";
color: #ffffff;
font-size:18px;
}

#content{
background-color:#c5d3e5;
padding: 5px 5px 5px 5px;
}

-->
</style></head>

<body>
<!-- Main Links -->
<div id="links">

<!-- Links oben Login -->
<div id="loben">test</div>

<!-- Links mitte Banner -->
<div id="lmitte"></div>

<!-- Links unten Menu -->
<div id="lunten">
<!-- Banner von Menu -->
<div id="menubanner"></div>

<!-- Links von Menu -->
<div id="menu_spalte"><div id="button_links"></div><div id="button_marked"><p align="center"><a href="test.html">Test</a></p></div></div>
<div id="menu_spalte"><div id="button_links"></div><div id="button_unmarked"><p align="center">test</p></div></div>
<div id="menu_spalte"><div id="button_links"></div><div id="button_unmarked"><p align="center">test</p></div></div>
<div id="menu_spalte"><div id="button_links"></div><div id="button_unmarked"><p align="center">test</p></div></div>
<div id="menu_spalte"><div id="button_links"></div><div id="button_unmarked"><p align="center">test</p></div></div>
<div id="menu_spalte"><div id="button_links"></div><div id="button_unmarked"><p align="center">test</p></div></div>

</div>
</div>

<!-- Main Rechts -->
<div id="rechts">

<!-- Rechts oben Banner -->
<div id="roben"></div>

<!-- Rechts unten Titel&content -->
<div id="runten">

<!-- Page überschrift -->
<div id="titel">Test Überschrift</div>
<!-- Page content -->
<div id="content">
södele das wär dann mal Microsoft Sans Serif 16 pt und in schwarz ohne effekte..
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel tellus. Maecenas eros. Morbi purus mi, porta eget, luctus eu, pharetra vitae, orci. Praesent viverra condimentum metus. Nam sit amet orci consequat risus aliquam pellentesque. Suspendisse auctor. In cursus lorem vitae neque. Integer pede nunc, aliquet ut, blandit ac, sodales sit amet, quam. Nunc hendrerit, dolor non sollicitudin bibendum, odio dui lobortis sem, ullamcorper semper enim tellus eu metus. Vestibulum augue nisi, molestie vel, hendrerit sed, euismod eu, felis. Morbi nisl. Pellentesque turpis libero, fringilla eu, mollis vel, elementum laoreet, quam. Suspendisse malesuada ultrices dui. Integer consectetuer convallis dui. Sed mollis quam vel urna. Nam lobortis cursus tellus. Curabitur congue purus. In ornare augue ut felis. Aliquam mollis tortor gravida orci.
Nulla varius. Phasellus varius eros varius libero. Proin tincidunt turpis vel massa. Etiam aliquet lacus eget sem. Nullam sagittis ipsum at lorem. Proin vitae leo vel sapien mattis volutpat. Suspendisse at sapien ac ante sagittis ultrices. Aenean condimentum, purus a ultricies cursus, erat turpis scelerisque arcu, ut pulvinar ante lectus posuere felis. Praesent quis lacus non urna aliquet congue. Nunc eu magna. Proin id sapien. Vestibulum eget nulla quis massa congue bibendum.
Phasellus faucibus odio ac risus aliquet bibendum. Duis ipsum mi, lacinia et, consequat vel, luctus non, odio. Nullam vel augue. Nulla cursus. Cras interdum elementum tellus. Mauris sagittis, elit vel ullamcorper ornare, orci enim dignissim ipsum, ac condimentum leo ligula ut nisi. Suspendisse neque. Nunc sodales pede a lectus. Quisque rutrum. Donec dapibus erat. Duis viverra, lectus sed gravida venenatis, enim elit tempor enim, a nonummy ipsum velit sit amet ipsum. Sed condimentum ultricies nisi. In nec purus in lacus nonummy dapibus. Cras dolor orci, consectetuer eget, sollicitudin
</div>
</div>
</div>
</body>
</html>

milahu milahu am 24.09.06 17:50

Baah.. weiche!! :P

Ne, mach erstma ein semantisches XHTML Markup und bastel dazu ein Stylesheet. Sonst is der ganze Zirkus ja witzlos..

Grob:
<html>
<head>
<title>baap</title>
</head>
<body>
<h1>Titel</h1>
<h2>Navigation</h2>
<ul>
<li>nav1</li>
<li>nav2</li>
</ul>
<h2>Inhalt</h2>
<p>Soolalaa</p>
</body>
</html>

crooked am 24.09.06 18:00

@milahu:
aber wenn du ne navi mit <ul><li><a href="#"></a></li></ul> machst, dann ists net valide

tnY am 24.09.06 19:37

und wie löse ich dann mein problem?

crooked am 24.09.06 20:05

ich hab mir deinen code jetzt nicht genau angeschaut:
mach die navi in einen div und da machste dann halt für den header oben n div oder sowas..
dann machste für jedes navi element <a href="#" class="navi"> oder so und das stylste dann wieder ;)

tnY am 24.09.06 20:08

das problem is ja eg das die schrift net zentral steht sondern verrutscht

crooked am 24.09.06 20:20

setzt dann mal
body {
margin:0px;
padding:0px;
}


und richte vllt mal mit padding aus

tnY am 24.09.06 20:24

bringt nix.. und ich hab auch shcon das div für die nav mit padding und so brachte auch nix

milahu milahu am 24.09.06 21:06

> wenn du ne navi mit <ul><li><a href="#"></a></li></ul> machst, dann ists net valide

Sagt wer? Und wie denn sonst?


Jinonidi, schieb den Kasten doch einfach mit margin-top runter

Scraper Scraper am 25.09.06 00:40

Quote
Original von milahu
> wenn du ne navi mit <ul><li><a href="#"></a></li></ul> machst, dann ists net valide
Sagt wer? Und wie denn sonst?


Da hat er absoluten Quark erzählt. Natürlich ist das XHTML 1.0 Strict valide, und es ist der gute Stil, Navigationen mit LIsten zu formatieren.

crooked am 25.09.06 13:48

ja? also bei mir wars demletzt net valide :rolleyes:

tnY am 25.09.06 15:10

naja auch egal lag an dem <p> das hat das nach unten verschoben.. hab das jetzt entfernt und anders gemacht aber weiß jemand wie ich machen kann das das p net nach unten und oben so ca 10 pixel abstand hat?

crooked am 25.09.06 15:25

display:inline;;)

tnY am 25.09.06 15:34

danke aber das zerstört das design rundherum :(

crooked am 25.09.06 16:09

tjo ausbessern ;)

Christian am 25.09.06 16:22

mach das doch einfach nur in dem bestimmten div der navigation, also etwa

#menu p{
display: inline;
}


btw, lad das ganze mal hoch und zeig es online, denn bei der div suppe... :D

milahu milahu am 25.09.06 21:35

> das das p net nach unten und oben so ca 10 pixel abstand hat?

margin:0 :]

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt