template aanpassen (CSS)

MrsSexyLegs · 20 jul 2008

Hoi iedereen

Mijn kennis van HTML is oké, wat CSS echter betreft.......

Nu heb ik een template (dus .html en .css) die ik wil aanpassen.....exact dezelfde codes met aanpassingen in achtergrond kleuren en images; echter nu geeft dit niet hetzelfde resultaat.

Mijn vraag is: hoe kan dit?!

Menu-hoover werkt niet zoals het moet, de teksten zijn niet zichtbaar terwijl elke image (het hele menu + de 'hoover' knop) exact een copie is van het origineel, alleen in een andere kleur??

Ook nog een ander probleempje: de designer heeft de afgeronde hoeken van de binnenpagina in de footer gezet - als ik nu de image vervang door mijn image dan is ie niet zichtbaar?
Dus nu staat die image in de html pagina:

Code:

<div id="footer"><a href="http://www.******.com"><img src="images/bottom.gif" border="0" alt=""/></a></div>

terwijl er alleen:

Code:

#footer {

	clear: both;
}

in de css staat?

Waarom is mijn image niet zichtbaar? Ik vervang toch alleen maar images/bottom.gif met images/bottom2.gif? (en ja: bottom2.gif staat wel degelijk in de folder 'images'....)

werocom · 20 jul 2008

Dan zou inderdaad je image gewoon zichtbaar moeten zijn.

In CSS werkt menu:hover alleen als je een doctype opgeeft, het werkt in ieder geval met de doctype xhtml strict, hoe het met de rest zit weet ik niet.

MrsSexyLegs · 20 jul 2008

werocom zei:
Dan zou inderdaad je image gewoon zichtbaar moeten zijn.

In CSS werkt menu:hover alleen als je een doctype opgeeft, het werkt in ieder geval met de doctype xhtml strict, hoe het met de rest zit weet ik niet.

Ik houd ook het doctype aan:

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">

Dus alles is hetzelfde maar het werkt toch niet.....

werocom · 20 jul 2008

Met die doctype zou hover inderdaad ook moeten werken.

defietser · 20 jul 2008

Als alles inderdaad hetzelfde is als het originaal buiten uw image, dan zou het inderdaad moeten werken. Maar het werkt niet, dus is het niet hetzelfde. Toon ons gewoon de template met de css van het origineel en dan hetgeen wat U er van gemaakt hebt, dan kunnen mischien uw probleem beter beoordelen maar met de gegevens die je nu toont kan je gewoon maar gissen! of er achter slaan met je pet.

ecd · 20 jul 2008

ooit een soort gelijk probleem gehad bleek dat mijn afbeelding een extensie in hoofdletters had (dus .GIF) en daarom niet zichtbaar was.

MrsSexyLegs · 21 jul 2008

Oké, hier al de codes.....

Eerst de originele html:

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>
<title>Purple </title>
<meta name="author" content=" http://www.***.com"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
</head>

<body>

<div id="container">

	<div id="header">
          <a href="#"><img src="images/header.gif" border="0" alt="Wedding Planner"/></a>
        </div>

	<div id="menu">
		<ul>
		<li><a id="Home" href="#" title="Home">Home</a></li>
		<li><a id="Services" href="#" title="Services">Services</a></li>
		<li><a id="Portfolio" href="#" title="Portfolio">Portfolio</a></li>
		<li><a id="AboutUs" href="#" title="About Us">About Us</a></li>
		<li><a id="Raves" href="#" title="Raves">Raves</a></li>
		<li><a id="Contact" href="#" title="Contact">Contact</a></li>
		</ul>
	</div>
                
<div id="content">
	
		<div class="roundcont">
   <div class="roundtop">
	 <img src="images/tl.gif" alt="" 
	 width="19" height="19" class="corner" 
	 style="display: none"/>
   </div>

<span class="content_title">Welcome To Purple </span>
<img class="floatright" src="images/flowers.jpg" border="0" alt="Purple Flowers"/>
 <div class="roundbottom">
	 <img src="images/bl.gif" alt="" 
	 width="19" height="19" class="corner" 
	 style="display: none"/>
   </div>
		</div>	
</div>

<div id="footer"><a href="http://www.**.com"><img src="images/bottom.gif" border="0" alt=""/></a></div>
</div>
</body>
</html>

en dit de style.css:

Code:

/* -----IE Hack----- */
html { 
	font-size: 100%; 
}

/* -----Body, Container, Header----- */

body {
	font-family: helvetica, arial, sans-serif;
	min-width: 760px;
	text-align: center;	
	font-size: .8em;
	background-color: #3C035A;
	color: #333333;
}
#container {
	width: 760px;
	text-align : left ;
	margin-left : auto ;
	margin-right : auto ;
	background-color:#E4BBFD;
	background-image: url(images/top.gif);
	background-repeat: no-repeat;
	background-position: top center;
}
#header {
	padding: 5em 0 0 0;
	text-align: center;
}

/* -----Menu------ */

#menu {
	position: relative; 
	width: 600px; 
	height: 50px; 
	background: transparent url(images/menu.gif) 0 0 no-repeat; 
	overflow: hidden; 	
	margin: 2em auto 1em auto; 
	z-index: 10;
}

#menu ul {
	margin: 0; 
	padding: 0;
}

#menu li {
	list-style-type: none; 
	display: inline; 
	width: 100px;
	height: 50px;
}

#menu a {
	display: block; 
	width: 100px; 
	padding-top: 50px; 
	height: 0; 
	text-decoration: none; 
	float: left; 
	background: transparent url(images/menuhover.gif) -110px -60px no-repeat; 
	overflow: hidden;
	outline: none;
}

* html #menu a:link, * html #menu a:visited {height:50px; he\ight:0;}

#menu a:hover {
	background-position: top right;  
	z-index: 50;
}

* html #menu a:hover {height:50px; he\ight:0;}

#lbox {
	width: 605px;
}

/* ------Main Content Box----- */

#content {
	width: 680px;
	margin-left : auto;
	margin-right : auto;
	padding:0 0 2.5em 0;
	background-color: #E4BBFD;
}

/* -----Content Header----- */

#content span.content_title {
	padding-left: 1em;
	font-family: Times, serif;
	font-size: 1.6em;
	font-style: italic;
	margin-left: 1em;
}

/* ------Round Inner Content Box------ */

.roundcont {
	width: 100%;
	background-color: #EFDBFF;
}

.roundcont p {
	margin: 1em 2em;
}


.roundtop { 
	background: url(images/tr.gif) no-repeat top right;
}

.roundbottom {
	background: url(images/br.gif) no-repeat top right; 
}

img.corner {
   	width: 19px;
   	height: 19px;
   	border: none;
   	display: block !important;
}

/* -----Float Images----- */

.floatright {
	margin: 0 2em 0 0;
	float: right;
}

.floatleft {
	float:left;
}

/* -----List----- */

.list {
	margin: 0 0 0 2.5em;
	padding: 0 0 0 2.5em;
}

/* -----Links----- */

a {
	color: #3C035A;
	outline: none;
}

a:hover {
	background-color: #3C035A;
	color: #EFDBFF;
	outline: none;
}

/* -----Footer----- */

#footer {
	clear: both;
}

Dit zijn dan mijn codes:
HTML:

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>
<title>index</title>
<meta name="author" content=" http://www.***.com"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" href="style1.css" type="text/css" media="screen"/>
</head>
<body>
<div id="container">

	<div id="header"><img src="images/top.jpg" border="0" alt="L*** AnneM***"/></a>
                 </div>


	<div id="menu"><ul>
		<li><a id="Home" href="indexred.html" title="Home">Home</a></li>
		<li><a id="L***" href="index.htm" title="L***">L****</a></li>
		<li><a id="B***" href="index2.html" title="B***">B***</a></li>
		<li><a id="N***" href="index1.html" title="N****">N***</a></li>
		<li><a id="Route" href="route.htm" title="Route">Route</a></li>
		<li><a id="Contact" href="form/formulier.html" title="Contact">Contact</a></li>
		</ul>

		
	</div>
                
<div id="content">
	
		<div class="roundcont">
   <div class="roundtop">
	 <img src="images/tl.gif" alt="" 
	 width="19" height="19" class="corner" 
	 style="display: none"/>
   </div>

<span class="content_title">Welkom bij ****,</span>
		
		<p>Tekst</p> 

<img class="floatright" src="images/winkel.jpg" border="0" alt="winkel"/>                       

 <div class="roundbottom">
	 <img src="images/bltest.gif" alt="bl" 
	 width="19" height="19" class="corner" 
	 style="display: none"/>
   </div> 
  
		</div>	
		
<div style="z-index:2;position:relative; top: 60px;left: 10px !important;"><a href="contruction.htm"><img src="images/koopjes.png" border="0" alt="Koopjes"></a></div>
	
</div>

<div id="footer" style="z-index:4;position:relative; top: 0px;left: -20px !important;"><img src="images/bottomafgerond.gif" border="0"/></div>
</div>
</body>
</html>

Mijn style1.css:

Code:

/* -----IE Hack----- */
html { 
	font-size: 100%; 
}

/* -----Body, Container, Header----- */

body {
	font-family:Premier Free Style DB, helvetica, verdana;
	min-width: 760px;
	text-align: center;	
	font-size: 1.1em;
font-weight:bold;
color: #8B0000;
	background-color: #BE0009;
	
}
#container {
	width: 760px;
	text-align : left ;
	margin-left : auto ;
	margin-right : auto ;
	background-color:#8B0000;
font-weight:bold;
background-image: url(images/topafgerond.gif);	
	background-repeat: no-repeat;
	background-position: top center;


}
#header {
	padding: 5em 0 0 0;
	text-align: center;
}

/* -----Menu------ */

#menu {
	position: relative; 
	width: 600px; 
	height: 50px; 
	background: transparent url(images/menubalkvivaldi.gif) 0 0 no-repeat;
	overflow: hidden; 	
	margin: 2em auto 1em auto; 
	z-index: 10;
}

#menu ul {
	margin: 0; 
	padding: 0;
}

#menu li {
	list-style-type: none; 
	display: inline; 
	width: 100px;
	height: 50px;
}

#menu a {
	display: block; 
	width: 100px; 
	padding-top: 50px; 
	height: 0; 
	text-decoration: none; 
	float: left;
background: transparent url(images/buttonhover.gif) -110px -60px no-repeat;  
	overflow: hidden;
	outline: none;
}

* html #menu a:link, * html #menu a:visited {height:50px; he\ght:0;}

#menu a:hover {
	background-position: top right;  
	z-index: 50;
}

* html #menu a:hover {height:50px; height:0;}

#lbox {
	width: 605px;
}

/* ------Main Content Box----- */

#content {
	width: 680px;
	margin-left : auto;
	margin-right : auto;
	padding:0 0 0 0;
	background-color: #8B0000;


}

/* -----Content Header----- */

#content span.content_title {
	padding-left: 1em;
	font-family:Premier Free Style DB, helvetica, verdana;
	font-size: 1.9em;
	font-style: italic;
	margin-left: 1em;
}

/* ------Round Inner Content Box------ */

.roundcont {
	width: 100%;
	background-color: #FF6347;
}

.roundcont p {
	margin: 1em 2em;
}


.roundtop { 
	background: url(images/tr.gif) no-repeat top right;
}

.roundbottom {
	background: url(images/br.gif) no-repeat top right; 
}

img.corner {
   	width: 19px;
   	height: 19px;
   	border: none;
   	display: block !important;
}

/* -----Float Images----- */

.floatright {
	margin: 0 2em 0 0;
	float: right;
}

.floatleft {
margin: 2em 0 0 0;
	float:left;
}

/* -----List----- */

.list {
	margin: 0 0 0 2.5em;
	padding: 0 0 0 2.5em;
}

/* -----Links----- */

a {
	
	outline: none;
}

a:hover {
	background-color: #8B0000;
	color: #FF6347;
	outline: none;
}

/* -----Footer----- */

#footer {
	clear: both;
}

Elke 'image' is tot de pixel nauwkeurig nagemaakt via photoshop, enkel andere kleuren.
De footer in mijn html heb ik zo moeten oplossen anders kreeg ik met geen mogelijkheid de nodige image van afgeronde hoeken zichtbaar geplaatst.

De menu-hoover werkt niet, origineel zit er een witte hooverknop in zonder tekst met een gekleurde achtergrond - ik heb dezelfde knop gemaakt maar dus met andere kleur achtergrond - zou dus eigenlijk wel moeten werken....

defietser · 21 jul 2008

Heb beide bekeken in IE 7, FF2, netscape navigator 9 en Opera 9.2. En nergens maar dan ook nergens zie ik een menu niet in het origineel en niet in uw versie. Als ik met de muis over de plaats ga waar het menu zou moeten staan dan zie via de alt tag die je ingevuld hebt wel de naam van het menu item verschijnen maar een menu dus niet. Om dat op te lossen zal dat wel wat werk vragen.
Mvg
defietser

MrsSexyLegs · 21 jul 2008

Natuurlijk kun je het menu niet zien, dat is gemaakt als een .gif en die .gif heb je niet in je folder 'images' staan, dat kan dus niet zichtbaar zijn......

Maar zie je in IE de lichte kleur van het tekstvak bij mijn versie niet doorlopen tot aan het einde v/d pagina? En de image van kpj.gif staat in IE ook buiten de inhoud als een vakje met rood kruisje ipv het plaatje. (terwijl de image toch echt wel in de correcte folder staat)

defietser · 21 jul 2008

Kan je dat even online zetten dat we ook je plaatjes kunnen downloaden zodat we een totaalbeeld krijgen van het origineel en het uwe.
PS moet eerst wat gaan werken nu kijk later op de dag er nog eens naar.
Mvg
defietser

template aanpassen (CSS)

MrsSexyLegs

Gebruiker

werocom

Gebruiker

MrsSexyLegs

Gebruiker

werocom

Gebruiker

defietser

Gebruiker

ecd

Gebruiker

MrsSexyLegs

Gebruiker

defietser

Gebruiker

MrsSexyLegs

Gebruiker

defietser

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy