Willkommen in der Webstatt
User-1 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?
User-2 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;

User-1 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 xyz-25";
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 xyz-134. Etiam aliquet lacus eget sem. Nullam sagittis ipsum at lorem. Proin vitae xyz-118 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 xyz-134 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 xyz-118 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>

User-3 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>

User-2 am 24.09.06 18:00

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

User-1 am 24.09.06 19:37

und wie löse ich dann mein problem?

User-2 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 ;)

User-1 am 24.09.06 20:08

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

User-2 am 24.09.06 20:20

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


und richte vllt mal mit padding aus

User-1 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

User-3 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

User-4 am 25.09.06 00:40

Quote
Original von xyz-145
> 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.

User-2 am 25.09.06 13:48

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

User-1 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?

User-2 am 25.09.06 15:25

display:inline;;)

User-1 am 25.09.06 15:34

danke aber das zerstört das design rundherum :(

User-2 am 25.09.06 16:09

tjo ausbessern ;)

User-5 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

User-3 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