Webstatt.org - Community seit 2006 - 2012 (2024?)

zentral ausrichten?

user-329
24.09.2006 14: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?
user-157
24.09.2006 15:12
rück am besten mal den code raus lächeln
dann gehts direkt besser
aber versuch mal für die elemente in der navi:


margin:0px auto;
asdf!
user-329
24.09.2006 15: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 user-135";

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 user-244. Etiam aliquet lacus eget sem. Nullam sagittis ipsum at lorem. Proin vitae user-228 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 user-244 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 user-228 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>
Avatar user-255
24.09.2006 15:50
Baah.. weiche!! frech

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>
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm
user-157
24.09.2006 16:00
@milahu:
aber wenn du ne navi mit <ul><li><a href="#"></a></li></ul> machst, dann ists net valide
asdf!
user-329
24.09.2006 17:37
und wie löse ich dann mein problem?
user-157
24.09.2006 18: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 zwinkern
asdf!
user-329
24.09.2006 18:08
das problem is ja eg das die schrift net zentral steht sondern verrutscht
user-157
24.09.2006 18:20
setzt dann mal


body {

margin:0px;

padding:0px;

}


und richte vllt mal mit padding aus
asdf!
user-329
24.09.2006 18:24
bringt nix.. und ich hab auch shcon das div für die nav mit padding und so brachte auch nix
Avatar user-255
24.09.2006 19: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
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm
Avatar user-294
24.09.2006 22:40
Original von user-255
> 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-157
25.09.2006 11:48
ja? also bei mir wars demletzt net valide :rolleyes:
asdf!
user-329
25.09.2006 13: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-157
25.09.2006 13:25 
display:inline;
zwinkern
asdf!
user-329
25.09.2006 13:34
danke aber das zerstört das design rundherum traurig
user-157
25.09.2006 14:09
tjo ausbessern zwinkern
asdf!
user-150
25.09.2006 14: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... Fettes Grinsen
Mehr schlaue Sprüche gibt es auf: anotherstyle.de Psicologia
Avatar user-255
25.09.2006 19:35
> das das p net nach unten und oben so ca 10 pixel abstand hat?

margin:0 :]
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm