Website bouwen photoshop dreamweaver css style sheet

Status
Niet open voor verdere reacties.
T

TheHagueKid

Gebruiker
Lid geworden
30 jan 2009
Berichten
8
Goedeavond heren,

Ik ben momenteel bezig met het in elkaar zetten van een zelf ontworpen site van photoshop naar dreamweaver. The slices wil ik onder controle houden met een css stylesheet.

Nu is mijn gelukt de layout te hebben staan precies zoals ik het wilde hebben staan. Maar zit er ergens in mijn coding een fout waardoor mijn knoppen niet getoond worden op de wijze dat ik ze wilde hebben.

Mijn vraag of iemand naar deze html code en css code zou kunnen kijken, Om me misschien verder een stappen verder op weg te helpen :). Alle hulp die geboden kan worden is bij deze alvast al gewaardeerd.

Css code
*{
padding:0;
margin:0;
}

body {
font-family: "Times New Roman", Times, serif;
background-image:url(blueblckgrnd.png);
background-repeat:repeat-x;
padding:0;
margin:0;
}

#container {
width:auto;
padding:0;
margin:auto;
}

/* HEADER LOGO */
#logo {
background-repeat:no-repeat;
background-image:url(header.jpg);
height:185px;
width:900px;
float:inherit;
margin:auto;
}
/* HEADER LOGO END */

/* MENU BAR */
#nav
{
background-image:url(navigation_menu.png);
position:absolute;
visibility:visible;
height:336px;
width:201px;
top:246px;
left:51px;
}

#nav ul
{
list-style:none;
padding:0;
margin:0;
}

#home a{
background:url(home_button_normal.png);
width:269.5px;
height:145.5px;
display:inherit;
}

#dkd a{
background:url(dkd_button_normal.png);
width:269.5px;
height:145.5px;
display:inherit;
}

#disaster a{
background:url(disaster_button_normal.png);
width:269.5px;
height:145.5px;
display:inherit;
}

/* MENU BAR END */
Klik om te vergroten...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<link href="images/styles.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
<!--
-->
</style>
</head>

<body>

<!--CONTAINER-->
<div id="container">

<!--BACKGROUND-->
<div id="background">

<!--MENU BAR-->
<div id="nav">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="dkd.html">dkd</a></li>
<li><a href="disaster.html">disaster</a></li>
</ul>
</div>
<!--MENU BAR END-->

<!--HEADER LOGO-->
<div id="logo"></div>
<!--HEADER LOGO END-->

</div>
<!--BACKGROUND END-->
</div>
<!--CONTAINER END-->

</body>
</html>
Klik om te vergroten...

Vriendelijke groeten.:thumb:
 
Ik heb een fout gevonden in je code, maar dat gaat het vast niet oplossen.

In je HTML pagina zeg je div='background', maar deze staat niet in je CSS.
 
Ja dat is iets wat ik over het hoofd heb gezien, ja nee die kan ik er dan tussenuit halen ja ;D. Maar nee het is niet de oplossing voor me knoppen problemen. Ik zie ze wel terug als linkjes, maar niet als de knoppen die ik ontworpen heb in photoshop :S.

Maar nee een goeie kan ik die tenminste wel uit de html halen :).
 
Niemand reageert op je vraag, dus daarom geef ik je maar een adviesje. Misschien kan je van de links een tabelletje maken, zodat je de achtergrond van de cellen kunt laten veranderen.
 
Nooit terug naar tabellen gaan als je alles net uit tabellen hebt gehaald...

Mij lijkt het vrij logisch: je neemt de id-specificatie vanuit de CSS niet over in je HTML.

Je zegt dat alle a-elementen die zich in een element met id "home" bevinden gestyled moeten worden, maar er is helemaal geen id home.

HTML: 
<li id="home"><a href="index.html">home</a></li>
<li id="dkd"><a href="dkd.html">dkd</a></li>
<li id="disaster"><a href="disaster.html">disaster</a></li>

brengt je vast een heel stuk verder.
 
Allereerst hartelijk bedankt voor de gegeven antwoorden.

Aan 5i5, ja dacht ik eerst ook maar je moet mensen maar net de kans geven dat het antwoord makkelijk te geven is ;). Bij deze had ik dan tog wel hetzelfde idee als James007.
Bij het ontwerpen geheel in css is het niet mijn bedoeling om dingen weer in tabellen te plaatsen. Daarvoor ook gekozen voor het CSS simpelweg omdat dat mij de meeste vrijheid zou moeten bieden.

Daarbij James007 dacht ik dat ik alle id's goed overgenomen had van me html, lettende op de delen met het # teken ervoor. Daarbij staan alle 3 de knoppen tog nog op samengesteld?
Ik zal zodadelijk alsnog proberen om tenminste het id plan nog eens na te kijken en uit te vinden hoe ik daar die fout op heb kunnen maken, en laat ik nog wel weten of het uiteindelijk gelukt is.

Alvast hartelijk bedankt voor alle adviezen die ik verkregen heb :).
 
Wow dat heb ik drie keer moeten lezen.

Even mijn oplossing verduidelijken misschien.

Het probleem is dus dat je in je CSS spreekt van a-elementen, en aangezien je voor die a-elementen telkens "#naam" zet, kan je css-stijl enkel werken als er ook een a-element is dat in een element met id "naam" staat.

bvb

#home a { }
lees je als: "alle a-elementen die zich in het element met id "home" bevinden.

Eigenlijk kun je dat nog in vraag stellen. Je kunt beter li#home a { } schrijven, aangezien een id toch sowieso uniek moet zijn op de pagina.

Maar je was dus vergeten om in de html ook die id's te voorzien bij de li-elementen.
 
Beide heren bedankt voor de mogelijke oplossingen tot nu toe.

Ik waardeer de gegeven hulp laten we dat niet vergeten ;).

Maar jammer genoeg tot nu toe is nog steeds het resultaat wat mijn eigenlijk niet zo moeilijk zou moeten lijken :o nog niet gelukt. Ik heb 5i5's zijn aanpassing voor me html overgenomen en de css gelaten zoals die was, hopende dat nu de html naar de juiste css regels zou verwijzen.
<!--MENU BAR-->
<div id="nav">
<ul>
<li id="home"><a href="index.html">home</a></li>
<li id="dkd"><a href="dkd.html">dkd</a></li>
<li id="disaster"><a href="disaster.html">disaster</a></li>
</div>
<!--MENU BAR END-->
Klik om te vergroten...

Maar het enige resultaat wat ik terug krijg is tekst inplaats van me knoppen. 5i5 Je had eentje inplaats van met plaatjes, met kleuren gedaan. Zou ik daarvan nog even de css erop mogen nalezen om zo misschien een idee te krijgen :).

Verder nogmaals hartelijk bedankt :thumb: op mezelf lijk ik niet op het antwoord te kunnen komen, en alle tutorials daarop nagelaten :confused:.
 
Staan de plaatjes in dezelfde map als je CSS documentje? Klopt de extensie en de naam van de afbeeldingen?

Kun je de bestanden niet even in een zip-mapje stoppen? Als het onder de 100kb blijft, kun je het hier uploaden, anders moet je het even ergens anders uploaden en hier het linkje posten.
 
Laatst bewerkt:
Nou aangezien de bedoeling was om het gewoon een echt werkende site te maken heb ik alvast maar de site opgezet. Maarja het zal al snel duidelijk zijn het heeft zeer zeker nog wel wat werk nodig. Dus ja hopelijk dat mijn knoppen probleem vlug opheldering zal krijgen :rolleyes:.

www.Dkpinc.noadsfree.com.

Werp er maar even een blikje op en ja ik ben vandaag wel weer actief bezig, probeer het met classes en alles alsnog zou te krijgen als ik wil maarja hopelijk dat eindelijk per deze avond het eindelijk gelukt zal zijn.

Nou ik ga weer even verder alvast bedankt voor alles weer :).
 
Ik heb wat dingen aangepast...

Nieuwe HTML-code:
Code: 
<!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>OWS</title>
<link href="images/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
-->
</style>
</head>

<body>

<!--CONTAINER-->
<div id="container">

<!--BACKGROUND-->
<div id="background">

<!--MENU BAR-->
<div id="nav">
<ul>
<br/><br/>
<li><a href="index.html"><img id="home" src="images/home_button_normal.png" /></a></li>
<li><a href="dkd.html"><img id="dkd" src="images/dkd_button_normal.png" /></a></li>
<li><a href="disaster.html"><img id="disaster" src="images/disaster_button_normal.png"></a></li>
</ul>
</div>
<!--MENU BAR END-->

<!--MENU BUTTONS-->
<div id="apDiv1"></div>
<!--MEN BUTTONS-->

<!--HEADER LOGO-->
<div id="logo"></div>
<!--HEADER LOGO END-->		

</div>
<!--BACKGROUND END-->
</div>
<!--CONTAINER END-->

</body>
</noscript>
<div style="text-align: center;"><div style="position:relative; top:0; margin-right:auto;margin-left:auto; z-index:99999">
<!-- Start of StatCounter Code -->
 <script type="text/javascript">
 var sc_project=4430450; 
 var sc_invisible=1; 
 var sc_partition=55; 
 var sc_click_stat=1; 
 var sc_security="321d0bfc"; 
 </script>
 
 <script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script><noscript><div class="statcounter"><a title="web counter" class="statcounter" href="http://www.statcounter.com/"><img class="statcounter" src="http://c.statcounter.com/4430450/0/321d0bfc/1/" alt="web counter" /></a></div></noscript>
 <!-- End of StatCounter Code -->
</div></div>
</html>

Nieuwe CSS-code:
Code: 
*{
padding:0;
margin:0;
}

body {
font-family: "Times New Roman", Times, serif;
background-image:url(blueblckgrnd.png);
background-repeat:repeat-x;
padding:0;
margin:0;
}

#container {
width:auto;
padding:0;
margin:auto;
}

/* HEADER LOGO */
#logo{
background-repeat:no-repeat;
background-image: url(header.jpg);
height: 185px;
width: 900px;
float: inherit;
margin:auto;
}
/* HEADER LOGO END */

/* MENU BAR */
#nav
{
	background-image: url(navigation_menu.png);
	position: absolute;
	visibility: visible;
	height: 336px;
	width: 201px;
	top: 246px;
	left: 51px;

}

#nav ul
{
list-style:none;
padding:0;
margin:0;
text-align: center;
}


/* MENU BAR END */
 
5i5 hartelijk bedankt voor je moeite, eindelijk staan de knoppen precies op de plaats waar ze hadden moeten staan :D.

Nu nog even uitzoeken hoe ik een mouse over command er tussen zet en dan is dat hoofdstuk bij deze gesloten :D.

Nogmaals hartelijk bedankt :thumb:
 
TheHagueKid zei:
5i5 hartelijk bedankt voor je moeite, eindelijk staan de knoppen precies op de plaats waar ze hadden moeten staan :D.

Nu nog even uitzoeken hoe ik een mouse over command er tussen zet en dan is dat hoofdstuk bij deze gesloten :D.

Nogmaals hartelijk bedankt :thumb:
Klik om te vergroten...


Geen probleem, het was een kleine moeite. Als je nog eens hulp nodig hebt kun je me altijd een PM sturen. Ook zal ik mijn abonnement op dit topic houden. :thumb:
 
Omdat hij op site staat dat is toegevoegd toen ik em oploadde?
Maar wat hij zou moeten doen zie ik niet :D. Maar ben ook nog niet klaar dus dat komt nog wel goed.

Zijn nog een paar dingen die ik verder moet coderen en ja dan alles nog eens fijntjes nalopen :).
 
Lol, nou waarschijnlijk al ga je naar http://www.statcounter.com/ en je logt in met je e-mail en pass die je voor het registeren van je website hebt gebruikt. Zie je de web-statistieken van je website.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan