Lite css hjälp

Gomenor · Inlägg av **Gomenor** » 07 maj 2007, 20:13

Tjenar gubbar!

Mellan min huvudmenu och min bild så blir det ett mellanrum, så undrar om nån har lite tid och klura ut vad som är fel.

http://combat.mine.nu/Lagunen/lagunen.php

Säg bara till om ni vill ha css eller html filen, jag vet inte hur självklart felet är.

Tack för all hjälp!

MVH Gomenor

(Ojsan, såg inte att det fanns ett webdesign forum, flytta gärna min tråd, tror inte jag kan göra det själv ^^)

Eric Tranehag, inAbsurdum

Tjena. Jag tar gärna en titt, men du lär väl posta en fullständig URL?

Gomenor · Inlägg av **Gomenor** » 07 maj 2007, 21:18

inAbsurdum skrev: Tjena. Jag tar gärna en titt, men du lär väl posta en fullständig URL?

Sry, blidde litta fel där

Tror det funkar nu iaf

MVH Gomenor

Gomenor · Inlägg av **Gomenor** » 08 maj 2007, 13:23

Här kommer css och php filen, kom på att det nog behövs. Det största problemet är att det inte ser likadant ut i Mozilla och i Internet explorer. Så jag undrar mer eller mindre hur man gör för att få så att IE ser likadant ut som i Mozilla.
Ignorera min första post, för det problemet har löst sig. Dock så finns sidan på samma adress som innan.
http://combat.mine.nu/Lagunen/lagunen.php

Kod: Markera allt

<?php
	$agent = $_SERVER['HTTP_USER_AGENT'];
	if( strstr($agent, "Firefox") ) 
		echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");  ?>
<!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>
<!--[if gte IE 5.5]>
<script language="JavaScript" src="dhtml.js" type="text/JavaScript"></script>
<![endif]-->
		<?php $tiru = "Beachvolley"; ?>
		
		<title><?php echo $tiru ; ?></title>
	<link type="text/css" rel="stylesheet" href="lagunen.css" />
	<?php
		if( strstr($agent, "Firefox") )
			echo('<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />');
		else if( strstr($agent, "MSIE") )
			echo('<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />');
	?>
</head>

<body>
<div id="page">	

	<div id="upper">

		<div id="logo">
		<img src="Lagunen3banner.jpg" width="800" height="140" align="left" alt="Lagunen">
		</div>
		<div id="menu">
		<?php include ("huvudmenu.php"); ?>
		</div>
	</div>

<div id="right">

		<div id="article">
		<p>tjatjatjatjatjatjatjatjatjatja tjatjatjatjatjatjatjatjatjatjatjatjatja</p>
		</div>
		<div id="guestbook">
		</div>
		<div id="login">
		</div>
		<div id="search">
		</div>
		<div id="alert">
		</div>
	</div>

	<div id="main">

		<div id="picture">
		<img src="banner.jpg" width="550" height="200" align="left" alt="Lagunen">
		</div>
		<div id="leftinfo">
		<p>1 Lagunen är en trevlig hamn. Jag skulle vilja pissa på varenda jävla båt som finns där!</p>
		<p>1 Lagunen är en trevlig hamn.</p>
		<p>1 Lagunen är en trevlig hamn.</p>
		<p>1 Lagunen är en trevlig hamn.</p>
		<p>1 Lagunen är en trevlig hamn.</p>
		</div>
		
	</div>
	
	<div id="footer">
	<hr/>
	</div>
	
</div>

</body>
</html>

Kod: Markera allt

#page {
width: 800px;
height: 1000px;
margin: 0px auto;

}

#upper {
width: 800px;
height: 5em;
}
#menu {
border: 0;
padding: 0;
width: 800px;
}
#logo {
width: 800px;
height: 140px;
}







#main {
width: 800px;
height: 750px;
}

#picture {
float: left;
padding: 0;
border: 0;



}

#leftinfo {
height: 550px;
width: 500px;
padding: 0;
}


#right {
width: 250px;
height: 750px;
float: right;
}

#article {
width: 235px;
height: 200px;
border: 1px solid black;
padding: 5px;
}


#footer {
margin-top: 100px;
}

Hoppas att någon kan göra sig förstådd av detta.

MVH Gomenor

per9000 · Inlägg av **per9000** » 08 maj 2007, 13:46

Gomenor skrev: [...]
Det största problemet är att det inte ser likadant ut i Mozilla och i Internet explorer
[...]

När det gäller detaljer är min uppfattning att detta är något man får leva med. Men det ser ut som att du har lite större problem än bara lite detaljer? Tolkar jag det rätt att ditt stora problem är att bilden med ett foto på är borta samt "I lagunen ..."-text-rutan?

I din CSS-fil har du på en del ställen "Npx;" eller "Mem;" och på en del ställen bara "0". Risken är att Explorer tänker "noll vaddå" och pajar. Testa med "0px;" och se om det hjälper.

Ett tips är att använda validatorn, men det verkar som att du har en bra css-fil
http://jigsaw.w3.org/css-validator/vali ... agunen.css

Annars är http://www.webdesignskolan.com/ ett jättebra referens för bland annat css och en massa annat som rör hemsidor, det finns en länk till css i menyn till vänster.

Som fotnot kan jag nämna att ett riktigt fult knep var att folk använde sig av Explorers buggar för att "stänga av" vissa delar av Css'er för att få sidor att se olika ut i FF och MSIE. Nu med MSIE7 minskade den möjligheten och det var därför det kom ett ramaskri för någon månad sedan att hemsidor skulle sluta fungera för att MSIE skulle börja följa w3c's standard.

HTH,
Per

per9000 · Inlägg av **per9000** » 08 maj 2007, 14:07

Några saker till.

Din kod utger sig för att vara "XHTML 1.0 Strict". Det innebär en del krav på din färdiga kod (den som spottas ut ur php'n). Till exempel är det en mycket bra ide att stänga alla taggar man startar, se exempel.

Kod: Markera allt

<img src="foo/bar.baz" />
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>Etc...</li>
</ul>

Din färdiga kod tycks inte stänga img-taggar. Dessutom matchar inte alla li och ul ett /li och /ul (eller tvärt om: att det finns för många /li och /ul).

Kod: Markera allt

	<div id="upper">

		<div id="logo">
		<img src="Lagunen3banner.jpg" width="800" height="140" align="left" alt="Lagunen">
		</div>
		<div id="menu">
		<ul id="navmenu">
<li><a href="index.php">START</a>
<ul>
<li><a href="harbour.php">Hamnen</a>
<li><a href="office.php">Kansli</a>

<li><a href="contact.php">Kontakta oss</a>
<li><a href="map.php">Karta/Adress</a>
<li><a href="committee.php">Styrelsen</a>
<li><a href="gusets.php">Gäster</a>
</ul>
</li>
<li><a href="club_section.php">Klubbsektionen</a>
   <ul>
     <li><a href="magazine.php">Tidning</a>

     <li><a href="sailing.php">Kappsegling</a>
     <li><a href="youth_section.php">Ungdom</a>
   </ul>
</li>

<li><a href="members.php">För Medlemmar</a>
   <ul>
     <li><a href="members.php">Logga IN</a>

     <li><a href="register.php">Registrering</a>
     <li><a href="members_only.php">Medlems INFO</a>
       </ul>
     </li>
     <li><a href="pictures.php">Bilder</a>
       <ul>
         <li><a href="#">Bildgalleri</a>

       </ul>
     </li>
     <li><a href="forum.php">Forum</a>
   <ul>
     <li><a href="#">Dagens inlägg</a>
     <li><a href="#">Alla inlägg</a>
     <li><a href="#">Skriv inlägg</a>

   </ul>
</li>
<li><a href="market.php">Köp/Sälj</a>
   <ul>
     <li><a href="#">Sälj</a>
     <li><a href="#">Köp</a>
     <li><a href="#">Lägg till annons</a>
   </ul>

</li>
<li><a href="links.php">Länkar</a>
   <ul>
     <li><a href="weekly_links.php">Veckans länk</a>
     <li><a href="#">.</a>
     <li><a href="#">.</a>
   </ul>
</li>

   </ul>
</li>
</ul>
		</div>

Ett jättebra verktyg för att detektera problem med sin kod är Tidy. Den finns som plugin till Firefox här (jag kan inte leva utan den):
https://addons.mozilla.org/en-US/firefox/addon/249

Det finns även en validator för html här: http://validator.w3.org/

Min tolkning är att det är din html som innehåller några problem som inte funkar i Explorer, men som Firefox har överseende med.

HTH,
Per

per9000 · Inlägg av **per9000** » 08 maj 2007, 14:12

Kom just på en till add-on som jag är ganska bra. Jag använder den för att stänga av all CSS på en sida och ändå se att den verkar stabil (jag räknar inte med att till exempel folk som surfar i en mobiltelefon har stöd för CSS trots att de säkert har det).

https://addons.mozilla.org/en-US/firefox/addon/60

Dessutom är den bra om man vill göra om firefox till 640*480 pixlar så screenshots får bra format

Finns säkert mer bra områden.

/Per

Ubuntu Sverige

Lite css hjälp

Lite css hjälp

SV: Lite css hjälp

SV: Lite css hjälp

SV: Lite css hjälp

SV: Lite css hjälp

SV: Lite css hjälp

SV: Lite css hjälp