Archief - probleem met css (navigatie links)

QuietKillah · 30 okt 2009

kheb een probleem met de css om de navigatie als volgt te krijgen: (het stuk in de 'bel' dus..)
zie hier het ontwerp <-- klik
kheb dus de bel onderverdeeld in een bovenkant, onderkant en midden (de midden moet dan telkens herhalen om mee te kunnen groeien)
en dan hebbek deze css code gebruikt voor deze stukken...

Code:

#menuonder{ 
float:left;
width: 270px;  
padding-bottom: 56px;
background-image: url(images/navigatie-background-onder.jpg);
background-repeat:no-repeat; 
background-position:top;
} 
#menuboven{ 
float:left;
width: 270px; 
padding-top: 160px;
background-image: url(images/navigatie-background-boven.jpg);
background-repeat:no-repeat; 
background-position:top;
} 
#menumidden{ 
float:left;
width: 270px; 
height: 1px; 
padding: 0; 
background-image: url(images/navigatie-background-repeat.jpg);
background-repeat:repeat-y; 
background-position:center;

}

kheb dan nog een paar andere dingen geprobeerd maar niks blijkt te werken ...
iemand een idee wat er fout gaat?

Drone · 30 okt 2009

Als het mogelijk is zet je html eens online dan kunnen we eens kijken met firebug.

QuietKillah · 30 okt 2009

ok .. hier is de html

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The White Stripes - My Doorbell | Index</title>
<link href="whitestripes.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
  <div id="header"></div>
  <div id="menu">
    <div id="menuonder">
      <div id="menuboven">
        <div id="menumidden">
          <ul>
            <li><a href="index.htm">Index</a></li>
            <li><a href="biografie.htm">Biografie</a></li>
            <li><a href="links.htm">Links</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="content"><img src="https://www.beyondgaming.be/forums" width="458" height="646" alt="artwork" />
  <p>Deze artwork is gemaakt en copyrighted door Maarten Defloo</p>
</div>
<div id="footer">Copyright © Kristof Feys </div>
</div>
</body>
</html>

of The White Stripes - My Doorbell | Index

Dastardly · 30 okt 2009

voeg aan menumidden is padding-left : 100px; toe. 100 is misschien net iets te veel maar je tekst zal toch binnen de afbeelding vallen.

(als dit hetgene is wat je zoekt, was niet 100% zeker)

p.s. op de site zelf was je ook nog een div tag vergeten te sluiten

Khelben · 31 okt 2009

Volgens mij zit de structuur van de 'div's van de menu een beetje raar in mekaar, gewoon onder elkaar.

Oppassen ook met de css reset, die gaf alles een zwarte achtergrond waar de 'ul' je background-image overkleurde.

voor de rest moet je de structuur van de divs van 'menu' en 'content' maar eens verder bekijken, die heb ik gewoon overgenomen, ik weet ook niet wat je er nog van wilt maken.

Dit is de HTML:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The White Stripes - My Doorbell | Index</title>
<link href="whitestripes.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
  <div id="header"></div>
  <div id="menu">
	
	<div id="menuboven">
	</div>
	<div id="menumidden">
		<div>
		  <ul>
            <li><a href="index.htm">Index</a></li>
            <li><a href="biografie.htm">Biografie</a></li>
            <li><a href="links.htm">Links</a></li>
            <li><a href="links.htm">Links</a></li>
            <li><a href="links.htm">Links</a></li>
            <li><a href="links.htm">Links</a></li>
            <li><a href="links.htm">Links</a></li>
            <li><a href="links.htm">Links</a></li>
            <li><a href="links.htm">Links</a></li>
            <li><a href="links.htm">Links</a></li>
            <li><a href="links.htm">Links</a></li>
            <li><a href="links.htm">Links</a></li>
            <li><a href="links.htm">Links</a></li>
            <li><a href="links.htm">Links</a></li>
          </ul>
		</div>
	</div>
	<div id="menuonder">
	</div>
</div>

<div id="content"><img src="images/typo.jpg" width="458" height="646" alt="artwork" />
  <p>Deze artwork is gemaakt en copyrighted door Maarten Defloo</p>
</div>
<div id="footer">Copyright © Kristof Feys </div>

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

en dit de css

Code:

* {
margin:0;
padding:0;
}
body{
	background-color:	#000000;
}

#container {
margin-left:auto;
margin-right:auto;
padding-left:10px;
padding-right:55px;
width:		1024px;
}
#header {
background-image:url(images/header.jpg);
background-repeat:no-repeat;
height:200px;
width:960px;
}
#menuonder {
background-image:url(images/navigatie-background-onder.jpg);
background-position:center top;
background-repeat:no-repeat;
padding-bottom:56px;
width:270px;
}
#menuboven {
background-image:url(images/navigatie-background-boven.jpg);
background-position:center top;
background-repeat:no-repeat;
padding-top:160px;
width:270px;
}
#menumidden {
background-image:url(images/navigatie-background-repeat.jpg);
background-position:center center;
background-repeat:repeat-y;
padding:0;
width:270px;
}
#menu {
	width:	270px;
	float: left;
}
p {
color:#FFFFFF;
}
a {
background-color:white;
}
#content{
	float:		left;
}
ul {
	background-color:	transparent;
	position:			relative;
	left:				100px;
}

#footer {
	clear:	both;
	color:	#FF0000;
}

sanzo · 31 okt 2009

Code:

	<div id="menumidden">
		<div>

Dees hier kan niet kloppen, die lijst zou toch in u menu midden moeten komen?

In menumidden heb je ook zoizo padding nodig, om de tekst juist te plaatsen.
Daarbij lijkt het mij niet zo handig, om u background te herhalen, gezien de border bovenaan dik is, en onderaan smaller wordt. Ik zou eerder voor een lange background image gaan, waarvan slechts het deel dat nodig is wordt getoond...

Drone · 31 okt 2009

The White Stripes Happiness

Geen extra divs maar je moet er wel minimum 3 links in het menu zetten of de achtergrond komt er onderdoor.

SilverStarke · 31 okt 2009

in uw css code:
gans vanboven : * vervangen door body
aanpassen in #menumidden:
height: 100px; (als je de hoogte weet) OF display: block; (als het verschilt in hoogte)
background-position: left center;
padding-left: 70px;

da zou het moeten zijn

QuietKillah · 31 okt 2009

danku gasten ... echt bedankt!

QuietKillah · 31 okt 2009

[drone]-[1.05];12407045 zei:
The White Stripes Happiness

Geen extra divs maar je moet er wel minimum 3 links in het menu zetten of de achtergrond komt er onderdoor.

mag ik enigszins weten hoe je dit juist gedaan hebt? code's fzo

want ik zie niet alles met firebug denkek

SilverStarke · 31 okt 2009

als ge die codes aangepast hebt zoals ik schreef moette daar allemaal geen rekening mee houden

uw firebug zal hetzelfde zijn dan de onze hoor

het 2de icon van links is handig om over probleemgebieden te bewegen. dan kan je wat wijzigen in de css om te zien of het betert

QuietKillah · 31 okt 2009

SilverStarke zei:
als ge die codes aangepast hebt zoals ik schreef moette daar allemaal geen rekening mee houden

uw firebug zal hetzelfde zijn dan de onze hoor het 2de icon van links is handig om over probleemgebieden te bewegen. dan kan je wat wijzigen in de css om te zien of het betert

ok dat werkt al half ...
nu nog de onderkant van de navigatie ... die is op één of andere manier onzichtbaar... enig idee hoe dit komt?

Drone · 31 okt 2009

Mijn oplossing is helemaal van af nul begonnen omdat ik zag dat je extra tags gebruikte terwijl je het veel minder kan doen.

http://www.friendly-stranger.com/files/whitestripesjoy.zip
Dit is een zipke met de html zoals ik het gedaan heb.

QuietKillah · 31 okt 2009

[drone]-[1.05];12409244 zei:
Mijn oplossing is helemaal van af nul begonnen omdat ik zag dat je extra tags gebruikte terwijl je het veel minder kan doen.

http://www.friendly-stranger.com/files/whitestripesjoy.zip
Dit is een zipke met de html zoals ik het gedaan heb.

danku zeer :applause:

QuietKillah · 31 okt 2009

Maar uit intresse zou ik graag nog uw oplossing eens zien SilverStarke ^^
danku voor de hulp iedereen allesinds

SilverStarke · 1 nov 2009

je wil alles voorgekaud he

als je bovenstaande aanpassingen al deed, dan voor de onderkant deze nog :
in css : #menuonder => background-position: center bottom;

QuietKillah · 1 nov 2009

SilverStarke zei:
je wil alles voorgekaud he
als je bovenstaande aanpassingen al deed, dan voor de onderkant deze nog :
in css : #menuonder => background-position: center bottom;

nee dat hoeft niet hoor maar ben een beginner in css
kmoet een opdracht maken in html en css maar heb nog bijna niets van css gezien. enkel het hele basic zoals floaten tekstkleur en al die zever
maar daarmee alleen lukt het blijkbaar niet

bedankt voor de hulp!

Archief - probleem met css (navigatie links)

QuietKillah

Legacy Member

Drone

Legacy Member

QuietKillah

Legacy Member

Dastardly

Legacy Member

Khelben

Legacy Member

sanzo

Legacy Member

Drone

Legacy Member

SilverStarke

Legacy Member

QuietKillah

Legacy Member

QuietKillah

Legacy Member

SilverStarke

Legacy Member

QuietKillah

Legacy Member

Drone

Legacy Member

QuietKillah

Legacy Member

QuietKillah

Legacy Member

SilverStarke

Legacy Member

QuietKillah

Legacy Member