Pereiti prie turinio

Negaliu DIV'o pastumt i norimą pusę

Gruzlys

Sukūrė Gruzlys
Tinklalapių kūrimas

 Dalintis Sekėjai 1

Rekomenduojami pranešimai

Gruzlys

Gruzlys 444

Sukurta
Sukurta

Vis bandau po truputį pritaikyti savo HTML, CSS žinias praktikoje, kodavau savo susikurtą paprastutį dizainą, viskas buvo gerai, kol nepažiūrėjau kaip svetainė atrodo tarp browser'io, o ne dreamweaver'io, navigacijos bar'as buvo pakilęs į patį viršų... po pasižaidimų su margin ir padding, gavos dar įdomesnis variantas, prisegiau nuotrauką... Sidebar su užrašu You also may be interested in.... turėtų but prisišliejęs prie krašto kairėje, o important info ir t.t., šalia, dešinėje... bandant patraukt i kaire sidebar'ą nieko nevyksta... i dešinę traukiasi...

Index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="Description" content="Troll web, some studios &amp;amp; media" />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Edgaras Ausvicas - [email protected]" />
<meta name="Robots" content="index,follow" />
<link rel="stylesheet" href="index.css" type="text/css" />
<title>TrollWeb </title>
</head>
<body>
<div id="wrap">
<div id="header">
<!-- Headerio info -->
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="price.html">Price</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- Navigacijos info -->
</div>
</div>
<div id="links">
<h2>You also may be interested in:</h2>
<p><a href="www.memebase.com">Memebase</a></p>
<!-- linku inf -->
</div>
<div id="content-wrap">
<div id="main">
<h2>Important info</h2>
<p><img src="images/logo.gif" width="163" height="153" class="float-left"; />
Big text with random important info
Big text with random important info
Big text with random important info
Big text with random important info
Big text with random important info</p>
<hr align="center" width="450" noshade="noshade" />
<h2>Not so important info</h2>
<p><img src="images/logo.gif" width="163" height="153" class="float-left"; />
Big text with random important info
Big text with random important info
Big text with random important info
Big text with random important info
Big text with random important info</p>
<!-- Pagr. turinys -->
</div>
<!-- content-wrap baigias -->
</div>
<div id="footer">
<h3>Trollweb 2011 | All right reserved</h3>
<!-- Footerio info -->
</div>
</div>
</body>
</html>

Index.css:

/* Headeris */
body {
background: #FFF url(images/bg.jpg) repeat 
font-size: 10px;
color: #0066FF;
line-height: 1.5em;
margin: 15px 0;
}
#header {
position: relative;
height: 50px;
background:#FFF url(images/head.gif) no-repeat left top;
margin: 0;
padding-top:150px;
}
#menu {
position: relative;
height: 48px;
width:900px;
background:#FFF url(images/navigation.gif) repeat-y left top;
margin: 0;
margin-top: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}
#menu ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: block;
float: left;
padding: 14px;
text-decoration: none;
color :#fff;
}
#menu ul li a:hover {
color: #e00;
}
/* Pagrindinis */
#links {
float: left;
border: medium;
width: 288px;
height: 430px;
position: relative; 
background: #FFF url(images/links.gif) no-repeat left bottom;
text-align: left;
margin-right: 400px;
}
#links a {
color: #0066FF;
text-decoration: none;
}
#links a:hover {
color: #F00;
}
#main {
text-align: left;
float: right;
width: 611px;
margin-top: 0px; padding: 0; padding-right: 350px;
display: inline;
}
#main h2 {
padding: 0;
margin-bottom: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 180%;
font-style: normal;
font-weight: bold;
}
#main h2 a {
color: #2666c3;
text-decoration: none;
}
#main p, #main h1, #main h2, #main h3, #main ol, #main ul,
#main blockquote, #main table, #main form {
margin-left: 25px;
margin-right: 20px;
}
#footer {
height: 57px;
width: 900px;
background: #CCC url(images/footer.gif) bottom center;
clear: both;
padding: 0;
margin: 0;
}
#footer h3 {
color:#666666;
text-align:center;
}
#about h1 {
text-align: center;
}
#about p {
text-align: center;
}
#price h2 {
text-align:center;
}
#price h1 {
text-align:center;
color:#C00;
}
#price p {
text-align:left;
}

post-47983-0-17800200-1325265299_thumb.jpg

trollweb.rar

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Frankenstein

Frankenstein 1.122

Atrašyta
Atrašyta (redaguota)

Visu pirma siūlau viską sudėti i fiksuoto pločio konteinerį. Tarkim <div id="konteineris"> style.css width:950px;

o tada position relative keisčiau į display:block; ir float:left; arba atitinkamai float:right;

Redagavo Frankenstein
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
×
 Dalintis
Sekėjai 1
Eiti į temų sąrašą

  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

×
×
  • Pasirinkite naujai kuriamo turinio tipą...