Kezdőoldal » Számítástechnika » Weblapkészítés » CSS help? Segítség kéne egy...

Themaki1333 kérdése:

CSS help? Segítség kéne egy kódsorhoz! Tovább->

Figyelt kérdés

Van egy kódom:

* {

padding: 0;

margin: 0;

}

body {

background: #000;

font-family: arial,tahoma,verdana;

font-size: 11px;

margin-top: 30px;

}


div#container {

width: 740px;

margin: 0 540px;

}

div#content {

float: left;

background-color: #898989;

color: lime;

padding: 20px;

margin-top: 1px;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

border-top-right-radius: 10px;

box-shadow: 2px 2px 2px #787878;

}

div#content h1 {

font-family: georgia;

font-size: 30px;

margin: 0 0 20px 0;

padding: 0;

}

div#content p {

text-align: justify;

line-height: 18px;

margin: 0 0 10px 0;

}


div#kep {

background-color: #000;

background-image: url(en.jpg);

background-repeat: none;

margin: 150px 200px;

}



ul#menu a,

ul#menu div {

padding: 10px 20px;

display: block;

color: #fff;

text-decoration: none;

text-shadow: 1px 1px 1px #000;

font-weight: bold;

}

ul#menu div {

cursor: pointer;

background: url('arrow_down.png') no-repeat 95% 50%;

}

ul#menu li {

list-style: none;

float: left;

color: #fff;

font-size: 14px;

text-transform: uppercase;

background: #000000;

background: -moz-linear-gradient(top, #006600 0%, #000000 100%);

background: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#000000));

margin-right: 1px;

width: 160px;

text-align: center;

border-top-left-radius: 10px;

border-top-right-radius: 10px;

}

ul#menu li:hover {

background: #000099;

}

ul#menu li ul {

display: none;

position: absolute;

border-top: 1px solid transparent;

}

ul#menu ul li {

float: none;

text-transform: lowercase;

margin: 0;

background: url('arrow_right.png') no-repeat #3f3f3f 5% 50%;

font-size: 11px;

border-radius: 0;

box-shadow: none;

}

ul#menu ul li:hover {

background: url('arrow_right.png') no-repeat #000 5% 50%;

}

ul#menu ul li a {

padding: 10px;

}


Nah és ugye bár úgy szeretném hogy a container ne tolja ki teljesen a weboldalt mert ha ezt lefuttatjátok akkora menu-t kitolja legszélre és a div#kep -et nem tudom berakni baloldalra... ha nem érthető akkor írjatok :D


2011. aug. 16. 10:32
 1/4 anonim ***** válasza:
100%

Nem futottam át teljesen a kódot, és ki sem próbáltam, mert a HTML oldal szerkezetét nem ismerem, de rögtön az elején egy észrevétel:

div#container {

width: 740px;

margin: 0 540px; <-- Ez így ebben a formában nem a legszebb

}

Ha más-más felbontáson nézed meg, akkor kicsit furcsán jelenhet meg, az 540px-t, én lecserélném egy "auto" parancsra, így ha kell ha nem, a doboz teljesen középen lesz, minden felbontáson.

Ha írsz egy HTML kódot is, akkor még mélyebbre tudunk ásni...

2011. aug. 16. 11:11
Hasznos számodra ez a válasz?
 2/4 compactegon ***** válasza:
100%

igen, legyen 0 auto a margin, jól mondta az előttem szóló. felbontáskülönbségnél nagyon el lehet cseszni ezzel.

próbáltad ez? (container):

clear: both;

2011. aug. 16. 12:43
Hasznos számodra ez a válasz?
 3/4 A kérdező kommentje:

köszi a válaszokat am én is a containerre tippeltem de akkor a div#menu-t hogy húzzam be jobb felsőbe? itt a html kód is:



<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>css menu</title>

<link rel="stylesheet" href="style.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(document).ready(function(){


$("ul#menu li:last-child").css("margin-right",0);


$("ul#menu div").click(

function(){


$(this).parent().find("div").css("background-image","url(arrow_up.png)");

$(this).parent().find("ul").slideDown("slow");


$(this).parent().hover(

function(){},

function(){

$(this).parent().find("ul").slideUp('slow');

$(this).parent().find("div").css("background-image","url(arrow_down.png)");

}

);


}

);

});

</script>

</head>

<body>


<div id="container">


<ul id="menu">

<li>

<div>Home</div>

<ul>

<li><a href="">submenu item 1</a></li>

<li><a href="">submenu item 1</a></li>

<li><a href="">submenu item 1</a></li>

<li><a href="">submenu item 1</a></li>

<li><a href="">submenu item 1</a></li>

</ul>

</li>

<li><a href="">SzolgÁltatÁsok</a></li>

<li><a href="">Kapcsolat</a></li>

<li>

<div>Referencia</div>

<ul>

<li><a href="">submenu item 1</a></li>

<li><a href="">submenu item 1</a></li>

<li><a href="">submenu item 1</a></li>

<li><a href="">submenu item 1</a></li>

<li><a href="">submenu item 1</a></li>

<li><a href="">submenu item 1</a></li>

</ul>

</li>

</ul>


<div style="clear:both"></div>


</div>

</body>

</html

2011. aug. 16. 16:35
 4/4 anonim ***** válasza:
100%

jobb felsőbe?

Akkor pl.: kiveszed a menüd a container div-ből, berakod elé, aztán css-ben a menüdnek, adsz egy float: right; parancsot.

Vagy a hagyod a container-ben, annak adsz egy 100%-os szélességet, és a menüdnek változatlanul: float: right;

2011. aug. 19. 13:42
Hasznos számodra ez a válasz?

Kapcsolódó kérdések:




Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!