MozillaPL.org - polskie centrum Mozilli

autor: **Gość** » 05 sierpnia 2008, 14:42

Witam

Mam pytanie. Jak ustawić dany div na środku w poziomie w stosunku do nadrzędnego diva. Strona w xhtml.

autor: **Tomek** » 05 sierpnia 2008, 15:04

margin:auto?

autor: **Gość** » 05 sierpnia 2008, 16:14

Samo margin auto nie działa. Działa jak margin left i right jest auto i jest podana szerokość diva. A można jako go wypośrodkować bez podawania szerokości ? Jakiś prosty zamiennik <center></center> ?

autor: **Tomek** » 05 sierpnia 2008, 16:57

podaj kod strony lub linka. bez tego to jazda bez trzymanki.

autor: **Gość** » 05 sierpnia 2008, 17:25

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "XHTML1-s.dtd">

<html>
<head>
<title>Primitive by Free CSS Templates</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="header">

<h1>Primitive</h1>
<h2>A free design from NodeThirtyThree + Free CSS Templates</h2>

</div>

<div id="menu">

<ul>
<li id="first" class="active"><a href="#">Homepage</a></li>
<li><a href="#">Products and Services</a></li>
<li><a href="#">Awards</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Press Releases</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

<div></div>

</div>

<div id="container">

<div id="primarycontainer">
<div id="primarycontent">



Jak wypośrodkować jakiś element w poziomie w tym divie ? obrazek, java cript

W przypadku tabeli mam tak zrobione:

<div id="table">
<table border width="500px">
<tr><td><td></td></td></tr>
...
</table>
</div>

w style.css:

#table
{
width: 500px;
margin-left: auto;
margin-right: auto;
}



</div>
</div>

<div id="secondarycontent">



<h4>V...</h4>
<p>...</p>

<ul>
<li><a href="#">Nibh metus ut libero</a></li>
<li><a href="#">Class aptent taciti sociosqu</a></li>
<li><a href="#">Tristique senectus et netus</a></li>
</ul>



</div>

<div class="clearit"></div>

</div>

<div id="footer">
© 2008 My Website. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org">Free CSS Templates</a>.
</div>

</body>
</html>

autor: **Gość** » 05 sierpnia 2008, 17:32

Style.css:

/*

Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name : Primitive
Version : 1.0
Released : 20080425

*/

*
{
margin: 0px;
}

body
{
font-family: verdana, helvetica, sans-serif;
font-size: 13px;
padding: 0px;
background-color: #ffffff;
color: #222222;
}

a
{
background-color: inherit;
color: #0000EE;
}

a:hover
{
text-decoration: none;
}

p
{
text-align: justify;
margin-bottom: 15px;
line-height: 22px;
}

ul
{
list-style: disc;
padding-left: 15px;
margin-bottom: 15px;
}

h3
{
font-size: 20px;
margin-bottom: 30px;
}

h4
{
font-size: 13px;
margin-bottom: 5px;
}

#header
{
background-color: #0022aa;
color: #fff;
padding: 30px 40px 30px 40px;
}

#header h1
{
font-size: 30px;
}

#header h2
{
font-size: 14px;
}

#menu
{
padding: 5px 30px 0px 30px;
margin-bottom: 30px;
color: #222222;
background-color: #f5f5f5;
border-bottom: solid 1px #DADADA;
}

#menu div
{
clear: both;
}

#menu ul
{
display: block;
position: relative;
top: 1px;
list-style: none;
padding: 0px;
margin-bottom: 0px;
}

#menu ul li
{
position: relative;
float: left;
border: solid 1px #dadada;
border-bottom: 0px;
margin-right: 5px;
}

#menu ul li a
{
display: block;
padding: 5px 10px 8px 10px;
text-decoration: none;
background-color: inherit;
color: #333333;
}

#menu ul li a:hover
{
background-color: #0022AA;
color: #fff;
}

#menu ul li.active, #menu ul li.active a, #menu ul li.active a:hover
{
background-color: #ffffff;
color: #333333;
}

#container
{
margin: 0px 40px 0px 40px;
}

#primarycontainer
{
float: left;
margin-right: -200px;
width: 100%;
}

#primarycontent
{
margin-right: 240px;
}

#primarycontent p
{
margin-bottom: 20px;
}

#secondarycontent
{
float: right;
width: 200px;
}

#footer
{
text-align: center;
margin: 20px 0px 0px 0px;
padding-top: 15px;
border-top: solid 1px #DADADA;
clear: both;
}

.clearit
{
clear: both;
height: 1px;
}

Mam javascript, który chce żeby mi się wyświetlał na środku w primarycontent. W secondarycontent mam obrazek i tekst pod nim i chce żeby całość była wypośrodkowana tak jakbym użył <center></center>.

autor: **rumsztyk** » 11 sierpnia 2008, 13:34

Anonymous pisze:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "XHTML1-s.dtd">

<html>
<head>
<title>Primitive by Free CSS Templates</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="header">

<h1>Primitive</h1>
<h2>A free design from NodeThirtyThree + Free CSS Templates</h2>

</div>

<div id="menu">

<ul>
<li id="first" class="active"><a href="#">Homepage</a></li>
<li><a href="#">Products and Services</a></li>
<li><a href="#">Awards</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Press Releases</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

<div></div>

</div>

wyśrodkować zawartość #primarycontent?

Kod: Zaznacz cały: #primarycontent { margin-right: 240px; text-align: center; }

MozillaPL.org - polskie centrum Mozilli

Główne menu:

Jak wypośrodkować div w xhtml

Jak wypośrodkować div w xhtml

Kto jest online

Nawigacja:

Stopka: