Gå til innhold

Problemer med plassering i css

bosannes

Anbefalte innlegg

bosannes

bosannes

Skrevet
Skrevet

Driver og utarbeider et nytt skjelett til hjemmesiden min, men jeg har mildt sagt "litt" problemer.

Tenker å lage ting for Opera og FF først, så konverterer/duplikerer jeg koden for IE senere. Så Opera og Firefox brukere - se her:

http://home.no.net/theflash/usus2/

 

Som dere ser er det mye som går galt på én gang, så jeg mistenker det er noe viktig jeg ikke har fått med meg når det gjelder css plasseringskoder.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
[ <!ELEMENT a (#PCDATA | table)* > ]>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>:: usus iterum </title>
<link rel="stylesheet" href="rapidred.css" type="text/css" />
<link rel="stylesheet" href="common.css" type="text/css" />
<!--[if IE]>
  <style type="text/css">
  /*<![CDATA[*/
#noniemenu {display:none;}
.holder {display:none;}
.menu {display:block; position:absolute; width:800px;}
a.outer, a.outer:visited {color:#c00; width:90px; height:18px; display:block; background:#fff; border:1px solid #fff; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
a.outer:hover {color:#fff; background:#c00; overflow:visible; border:1px solid #fff;}
a.outer:hover table {display:block; background:#c00; border-collapse:collapse; border:1px none #fff;}
a.inner, a.inner:visited { border:1px solid #999;display:block; height:18px; text-decoration:none; color:#fff; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; text-align:center; background:#999;}
a.inner:hover {background:#fff; border: 1px solid #fff; color:#c00;}
.container {background:#fff; border: 1px solid #c00; color:#999;}
.bottombar {background:#fff; border: 1px solid #c00; color:#c00; font-style:italic;}
.bilder {background:#fff; border: 1px solid #c00; color:#c00; font-style:italic;}
  /*]]>*/
  </style>
<![endif]-->
</head>
<body>
<div class="main">
<img src="header1.gif" alt="usus">
<br>
<div class="menu">
<a class="outer" href="#">Hjem
</a>
<a class="outer" href="#">2
<table><tr><td>
<a class="inner" href="#">2.1</a>
<a class="inner" href="#">2.2</a>
<a class="inner" href="#">2.3</a>
<a class="inner" href="#">2.4</a>
<a class="inner" href="#">2.5</a>
</td></tr></table>
</a>
<a class="outer" href="#">3
<table><tr><td>
<a class="inner" href="#">3.1</a>
<a class="inner" href="#">3.2</a>
<a class="inner" href="#">3.3</a>
<a class="inner" href="#">3.4</a>
</td></tr></table>
</a>
<a class="outer" href="#">4
<table><tr><td>
<a class="inner" href="#">4.1</a>
</td></tr></table>
</a>
</div>
<div id="noniemenu">
<div class="holder">
usus<br />
<a class="inner" href="#">Nyheter</a>
<a class="inner" href="#">Gjestebok</a>
</div>
<div class="holder">
2d<br />
<a class="inner" href="#">Portfølje</a>
</div>
<div class="holder">
3d<br />
<a class="inner" href="#">Portfølje</a>
<a class="inner" href="#">Modeller</a>
<a class="inner" href="#">Tips</a>
</div>
<div class="holder">
Web<br />
<a class="inner" href="#">Tjenester</a>
<a class="inner" href="#">PHP</a>
<a class="inner" href="#">CSS</a>
</div>
<div class="holder" style="float:right;">
Skins<br />
<a class="inner" href="#?style=rapidred">Rapid Red</a>
<a class="inner" href="#">PHP</a>
<a class="inner" href="#">CSS</a>
</div>
<div class="holder" style="float:right;">
Tjenester<br />
<a class="inner" href="#">Linklaster</a>
</div>
</div>
 <div class="container"> 
   <p> </p>
   <p>Dette er tekst - Dette er tekst - Dette er tekst - Dette er tekst - Dette 
     er tekst</p>
 </div>
 <div class="bottombar">Designed and Developed by Bengt Ove Sannes © 04-05
 </div>
 <div class="bilder"> 
   <img src=http://home.no.net/theflash/images/3d/skylinet.jpg width=200 height=150>  </div>
</div>
</body>
</html>

common.css

.menu {display:none;}

.main {margin:auto; width:800px;}

#noniemenu {position:absolute; width:800px;}

.holder {

width:90px; height:18px; display:block; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;
}

.container {margin-top:20px; float:left; width:600px; height:400px; position:static;}

.bottombar {height:20px; width:800px; font-size:11px; line-height:18px; text-align:center; font-family:arial, sans-serif, helvetica; padding:auto;}

.bilder {height:200px; width:200px; font-size:11px; line-height:18px; text-align:center; font-family:arial, sans-serif, helvetica; float:right;}

rapidred.css

body {font-size:1%; color:#fff; background:#fff; } /*get rid of the IE bug that prints the the end of the !doctype */

.holder {color:#c00; width:90px; height:18px; display:block; background:#fff; border:1px none #fff; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}

.holder:hover {height:auto; cursor:pointer;color:#fff; background:#c00; border: 1px none #c00;}

a.inner, a.inner:visited {display:block; width:89px; height:18px; border: 1px solid #999; text-decoration:none; color:#fff; background:#999;}

a.inner:hover {background:#fff; border: 1px solid #fff; color:#c00;}

.container {background:#fff; border: 1px solid #c00; color:#999;}

.bottombar {background:#fff; border: 1px solid #c00; color:#c00; font-style:italic;}

.bilder {background:#fff; border: 1px solid #c00; color:#c00; font-style:italic;}

p { color:#000; font-size:16px;}

 

Ting som ikke er som det skal:

-Menylinja er over headeren når siden lastes

-"Designed and Developed by Bengt Ove Sannes © 04-05" skal ligge i bånn. Skal til en hver tid ligge under "container"

-"bilder" skal ligge til høyre for "container", rett under menyen

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
bosannes

bosannes

Skrevet
  • Forfatter
Skrevet (endret)

Hvem har sagt at jeg selger web-sider?

Man må uansett alltid prøve mer enn man klarer om man skal ha sjans til å utvikle seg ;)

 

EDIT: Til svaret over. Hadde du gått inn og sjekket, hadde du sett at det var en enkel gratistjeneste. Et php-script. Tjeneste trenger ikke nødvendigvis vært noe man betaler andre for å gjøre ;);)

Endret av bosannes
Lenke til kommentar
potetskrell

potetskrell

Skrevet
Skrevet

Grusom kode. Har på følelsen av at du blander tabeller inn der du ikke helt vet hva du skal gjøre. I tillegg ser css'en din helt grusom ut. Vanskelig å lese for mennekseøyet.

 

Pkt 1. Du lager lister (menyer) med liste-elementet "li". Eks:

<ul><li>lenke 1</li></ul>

 

Pkt 2. Man blander ikke tabeller inn der man føler for det i stedet for en div. Fjern alt av tabeller. Skal du presentere data i flere kolonner, bruk table-elementet.

 

Pkt 3. <!--[if IE]> bruker man bare ikke. Det resulterer i masse unødvendig kode, og på den enkle sida der trengs det hvertfall ikke. Det er alltid en vei rundt.

 

Pkt 4. "Helst" skriver man css slik. 

div#welcome {
margin-bottom: 3px;
}

Det blir rett og slett mye mer oversiklig og det er lettere å finne feilene dine.

 

Pkt 5. Menyen din er totalt malplassert og viker ikke i ordentlige nettlesere. Tror neppe den fungerer i IE heller.

 

Pkt 6. Man bruker ikke :: i tiltle-elemtet. Prinsippsak!

 

Pkt 7. Du skriver xhtml, dermed er det viktig at du avslutter elementer riktig. Feks <br /> og 

<img src=http://home.no.net/theflash/images/3d/rimt.jpg width=200 height=150

skrives:

<img src="http://home.no.net/theflash/images/3d/rimt.jpg" width="200" height="150" />

 

Sikkert masse mer, men jeg er trøtt. Har jeg begått feil, rett meg. Denne sida er vel det jeg mener er en som burde blir slettet. Begynn på nytt, lær css og html først.

Lenke til kommentar
bosannes

bosannes

Skrevet
  • Forfatter
Skrevet
Pkt 5. Menyen din er totalt malplassert og viker ikke i ordentlige nettlesere. Tror neppe den fungerer i IE heller.

Hos meg fungerer menyen helt fint. Både i IE, Opera og Firefox. :\

 

Ellers: Takk for mye konstruktiv kritikk. Tror nok jeg begynner på nytt fra bånn av ja. Utgangspunktet var egentlig en meny jeg fant på nettet, som jeg bare jobbet videre på, og egentlig raserte fullstendig. Er ikke så mye igjen av den orginale koden nei...

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...