☰

» »

Problem prikaza #left-nav

Problem prikaza #left-nav

slitkx ::

Navodilo na tej strani.

Če zanemarim, da sem izbral svoje barve in ozadja, bi moralo:
- izgledati takole:

Glej levo spodaj, črtkani okvir.
- izgleda pa takole:


Vsebina #left-nav style-sheeta je v originalu 
#left-nav { margin: 20px 0px 10px 0px; width: 180px; float: left; border: thin dashed #006600; }
, pri meni pa 
#left-nav {
	width: 180px;
	float: left;
	margin: 20px 0px 10px 0px;
	background-color: #9999FF;
	border: thin dashed #CCFF33;
}


Kaj je vzrok, da meni ne prikaže pravilno?

slitkx ::

Dosedanji izgled celotne HTML kode:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sl" lang="sl">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Uvertura</title>
<link href="primer.css" rel="stylesheet" type="text/css">

<style type="text/css">
</style>

</head>

<body>

<div id="container"> 
<div id="masthead"></div>
<div id="top-nav"></div>
<div id="left-nav"></div>
</div>

</body>

</html>


Dosedanji izgled .css datoteke:

body {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	background-repeat: no-repeat;
	background-color: #000000;
	padding: 0px;
	margin: 0px;
    body img { border: 0px; text-decoration: none; }, 
}
#container {
	background-color: #FFFFFF;
	width: 80%;
	margin: 10px auto 10px auto;
	padding: 10px;
}

#masthead {
	background-position: right center;
	height: 170px;
	background-image: url('water-drops-on-spider-web.jpg');
	background-color: #54B431;
	background-repeat: no-repeat;
}
#top-nav {
	height: 50px;
	border-color: #808000;
	border-top-width: medium;
	border-bottom-width: medium;
	border-top-style: solid;
	border-bottom-style: solid;
	background-color: #FFFFFF;
}
#left-nav {
	width: 180px;
	float: left;
	margin: 20px 0px 10px 0px;
	background-color: #9999FF;
	border: thin dashed #CCFF33;
}

shadeX ::

To se dogaja zato ker je tvoj #left-nav prazen. Recimo če dodaš kakšen element se bo #left div takoj "odprl":

<body>
 
<div id="container">
<div id="masthead"></div>
<div id="top-nav"></div>
<div id="left-nav">

<ul>
<li>List item 1</li>

</ul>

</div>
</div>
 
</body>



Če pa hočeš da se ti odpre brez da bi dodal elemente moraš nastaviti višino v css:

#left-nav {
    width: 180px;
	height: 50px;
    float: left;
    margin: 20px 0px 10px 0px;
    background-color: #9999FF;
    border: thin dashed #CCFF33;
}

slitkx ::

Aha, ok. je logično. Samo v navodilih izrecno piše, da naj ne določim višine ...

Sicer na koncu navodil za #left-nav piše "Menus are best suited to unordered lists. Additional style rules will need to be set for your left navigation.", a ni videti kot navodilo.

Zgodovina sprememb…

  • spremenil: slitkx ()

shadeX ::

Kaj maš to? Za šolo najbrž ni? :D

Itak je logično da bo levi div nekaj vseboval, tako da mu je brez veze določat višino in se bo odprl takoj ko boš dodal neko vsebino.

slitkx ::

Ne, ni za šolo. :D

Predstavitveni site si delam korak za korakom (miceni koraki).
Nočem nič prehitevati, bo pa itak simple stran.
Ko bo pa postavljena, bodo pa morebiti na vrsti dodelave.

Zgodovina sprememb…

  • spremenil: slitkx ()

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč		151950 (1678) kr?en
»

poravnava li elementov

Oddelek: Izdelava spletišč		82157 (2022) boss-tech
»

Wampserver in Firefox

Oddelek: Izdelava spletišč		61859 (1739) jonystar
»

Podrta oblika strani

Oddelek: Izdelava spletišč		131406 (1085) echoman
»

[CSS]Pozicioniranje footer diva

Oddelek: Izdelava spletišč		62467 (2414) amaze646

Več podobnih tem