Gå til innhold

Width problem i meny+div annet :)

Inc

Av Inc
i Programmering og webutvikling

Anbefalte innlegg

Inc

Inc

Skrevet
Skrevet (endret) 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><!--NOTATER:Kodet av xxxxx og optimalisert for Opera 9 --><title>xxxxxxxxxx</title>







<link href="stilark.css" rel="stylesheet" type="text/css">

</head>
<body>


<div id="header">
<a href="http://xxxxxxxx/" target="_self"> <img id="tbanner" src="Banner/TotalbannerST.jpg" alt="Banner"></a></a></div>



<ul id="meny">
<li><a class="white" href="Index.html">Til forsiden</a></li><li><a class="white" href="Om oss/Index.html">Presse</a></li><li><a class="white" href="Levr/Index.html">Leverandører</a></li><li><a class="white" href="Prosjekter/Index.html">Prosjekter</a></li><li><a class="white" href="Intern/Index.html">Intern</a></li><li><a class="white" href="Index.html">Råd\Tips</a></li><li><a class="white" href="Verktøy/Index.html">Verktøy</a></li></ul>

<div id="midt">
<p><p><p><p></p></p></p></p></div>

<div id="footer">
<p>copyright © <a class="red" href="http://www.xxxxxxxx.no/" target="_self">xxxxxxx</a>
</p></div>


<!-- Start of StatCounter Code -->
<script type="text/javascript" language="javascript">
var sc_project=1583766; 
var sc_invisible=1; 
var sc_partition=14; 
var sc_security="6473cc30"; 
</script>

<script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><a href="http://www.statcounter.com/" target="_blank"><img  src="http://c15.statcounter.com/counter.php?sc_project=1583766&java=0&security=6473cc30&invisible=1" alt="free hit counter script" border="0"></a> 
</noscript>
<!-- End of StatCounter Code -->

</body></html>

/*Optimalisert for Opera 9 */
/*Laget av xxxxx*/
/* NOTATER*/





body {
background:url(Div/bakgrunn/bodyBg.gif) repeat;
}
/*SKRIFT*/
p { text-indent: 0em; margin-top: 0px; margin-left: 10px; margin-right: 10px; letter-spacing: 0px;}
h1 {color: #966B72; font-family: Georgia, Times New Roman, Times, serif; letter-spacing: 2px; margin-top: 0px;}
h2 {color:#FF0000; font-family: Georgia, Times New Roman, Times, serif; margin-left: 10px;}
h3 {color: #966B72; font-family: Georgia, Times New Roman, Times, serif; margin-left: 10px;}
h4 {color: #966B72; font-family: Georgia, Times New Roman, Times, serif; margin-left: 10px;}
h5 {color: #966B72; font-family: Georgia, Times New Roman, Times, serif; margin-left: 10px;}
h6 {color: #966B72; font-family: Georgia, Times New Roman, Times, serif; margin-left: 10px;}

a.white:link {color:#FFFFFF; text-decoration:none}
a.white:visited {color:#FFFFFF; text-decoration:none}
a.white:hover {color:#FF0000; text-decoration:underline}
a.white:active {color:#000000; text-decoration:underline}

a.red:link {color:#000033; text-decoration:none}
a.red:visited {color:#000033; text-decoration:none}
a.red:hover {color:#FF0000; text-decoration:underline;}
a.red:active {color:#993333; text-decoration:underline}

/*DIVs*/
img#tbanner {
position:relative;
border: none;

}
#header {
position: relative;
visibility:visible;
height: 90px;
width: 949px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 0px;
border: 1px solid black;
}
#meny {
   width:909px;
height: 15px;
margin-left: 10px;
background-color:#333333;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:12px;
font-weight: bold;
margin-bottom: 0px;
margin-top: 0px;
padding-bottom: 3px;
padding-top: 3px;
border-left: 1px solid black;
border-right: 1px solid black;
position: relative;
text-align: center;


}
#meny ul {
background-color:#00FF66;
margin:0;
width: 949px;
position: relative;
height: 18px;
border: none;
}
#meny li {
white-space: normal;
padding:0.5em;
display: inline;
}
#midt {
background-color:#FFFFFF;
border: 1px solid black;
width:949px;
position:relative;
left:10px;
padding: 0px;
margin: 0px;
}
#kartmini { 
position:absolute; 
left:550px;
top:10px;
right:0;
width:200px;
height:200px;
}
#tekstkart {
font-size:12px;
position:absolute;
left:590px;
top:215px;
}
#pl {
position: relative; margin:10px; width:530px; height:238px; }
#vk {
border:1px solid #000000;
margin-left:10px; margin-right:10px;
width:auto;
height:auto;
background-color: #FFDB9E;
top:0px;
position:relative;
padding:10px;
margin-bottom:10px;
}

#footer {
font-size:12px;
position:relative;
text-align:center;
margin-left: 10px;
width: 949px;
padding-bottom: 0px;
padding-top: 0px;
padding: 0px;
padding-left: 0px;
padding-right: 0px;
}

 

I opera visen den riktig, men IE blir menyen ca 40 px for smal. Tenker det har noe med padding å gjøre, men side det er ett html4.strict type så har blitt fortalt det skal vises likt i begge browsere.

Jeg er ikke ute etter kritikk, men hjelp til å forstå og løse disse problemene som oppstår underveis.

Takk

Endret av Inc
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
maZe--

maZe--

Skrevet
Skrevet

lag til en egen css fil for IE.

 

Og for å binde sammen til den nye CSSen så bruker du:

 

<!--[if IE]>

<link href="style2.css" rel="stylesheet" type="text/css" />

<![endif]-->

 

Denne legger du rett under den "vanlige" CSS lenken din.

 

Da vises det slik:

 

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

<!--[if IE]>

<link href="style2.css" rel="stylesheet" type="text/css" />

<![endif]-->

 

 

Og foressten, du må såklart skrive inn de justeringene du trenger for IE.

 

Lykke til og håper jeg bidro med noe smart :)

Lenke til kommentar
Inc

Inc

Skrevet
  • Forfatter
Skrevet (endret)
lag til en egen css fil for IE.

 

Og for å binde sammen til den nye CSSen så bruker du:

 

<!--[if IE]>

<link href="style2.css" rel="stylesheet" type="text/css" />

<![endif]-->

 

Denne legger du rett under den "vanlige" CSS lenken din.

 

Da vises det slik:

 

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

  <!--[if IE]>

  <link href="style2.css" rel="stylesheet" type="text/css" />

  <![endif]-->

 

 

Og foressten, du må såklart skrive inn de justeringene du trenger for IE.

 

Lykke til og håper jeg bidro med noe smart :)

7327622[/snapback]

Jepp, stemmer det.

Hvis jeg har forstått det riktig, så skal jeg slippe å gjøre det for det er ett html4.strict dokument?

Quoter neitakk fra en pm her:

Men husk, hvis du bruker 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

på toppen av dokumentet, så tolker IE helt likt Opera.

Endret av regga
Lenke til kommentar
834HF42F242

834HF42F242

Skrevet
Skrevet (endret)

Jeg er nå ikke 100% sikker på om dette er tilfelle, men selv har jeg erfart at det er det. Da jeg gikk tilbake til HTML 4.01 på nettstedet mitt, kunne jeg kutte alle CSS-unntak.

Tror nesten du bare må prøve deg frem med småjusteringer i et eget skjema for IE6. Ser du bruker en del CSS-spesifikasjoner jeg ikke gjør, og disse kan tolkes forskjellig av IE og Opera.

 

Edit! Fant en liten feil forresten: 

</a></a>

Den er ikke vesentlig for problemet, men må uansett fikses. :p

 

PS: Husk at border også påvirker bredden, og ikke bare padding. Border 1px gir 2px mer bredde.

Endret av neitakk
Lenke til kommentar
Inc

Inc

Skrevet
  • Forfatter
Skrevet

Når en leser gjennom guide etter guide med oppskrifter osv, så sier de ingenting om hvordan du skal lage siden, det blir egentlig helt opp til hver enkelt.

F.eks ene siden her (prosjekter), skal alle hus legge ut som en annonse, en type prospekt kan en si.

Det er mange måter å gjøre det på og en ser ikke alt i kildekoden hos andre.

 

La oss si 4 hus skal legges ut. (Det skal ikke mekkes med php enda)

Til venstre ett mindre bilde, til høyre skrives all info og besøkende skal ha mulighet for å bla gjennom flere større bilder av objektet.

Hvordan løses det enklest?

 

Liste nedover med ul og li?

Lage tabeller?

Lenke til kommentar
maZe--

maZe--

Skrevet
Skrevet

du kan bruke ul på disse, men da må css til. Jeg vet ikke helt om dere skriver over at dere ikke skal bruke css i denne sammenhengen men jeg tror det er best.

 

såklart så kan IE fucke seg helt med de instillingene du gjør her, men du må bare prøve deg fram.

Lenke til kommentar
Inc

Inc

Skrevet
  • Forfatter
Skrevet (endret)
du kan bruke ul på disse, men da må css til. Jeg vet ikke helt om dere skriver over at dere ikke skal bruke css i denne sammenhengen men jeg tror det er best.

 

såklart så kan IE fucke seg helt med de instillingene du gjør her, men du må bare prøve deg fram.

7334715[/snapback]

Ja, jeg gikk vel egentlig for ul og det gikk forsåvidt smertefritt.

Ble straks litt vanskeligere når flere bilder skulle vises frem noe ala slik aftenposten har i sine bildeserier. Noen ide?

Edit: ja, kun html og css foreløpig.

Endret av regga
Lenke til kommentar
Inc

Inc

Skrevet
  • Forfatter
Skrevet (endret)
Kan jeg få se et eksempel av dette?

Mangler heading og liste adressen

<div id="midt">
<div id="prospekt1"><h1 id="prospekt1">
<a href="http://www.idehus.no/hovedsider/husmodeller.php?modell=Vesleknipen" target="_blank"><img src="Prosjekt1/perspektivIdehus_VESLEKNIPEN.jpg" alt="Bilde vesleknipen"></a></h1>
<p id="tekstprospekt1"><a class="black" href="http://www.idehus.no/hovedsider/husmodeller.php?modell=Vesleknipen">Vesleknipen</a>Fra Idehus under oppføring på xxxxx.
Adresse: xxxxxxxxx <a href="../Om oss/Index.html">Kontakt info</a></p>
</div>
</div>

h1#prospekt1 {
text-align:left;
width:300px;
height:190px;
}
p#tekstprospekt1 {
text-align:left;
position: relative;
left: 320px;
width: 600px;
top: -190px;
height: 100px;

Endret av Inc
Lenke til kommentar
Inc

Inc

Skrevet
  • Forfatter
Skrevet

Ja, ser når jeg vil h4 på vesleknipen så forsvinner all teksten vekk ifra den plasseringen den er satt til, tror denne koden er litt rotete.

2 spørsmål:

Ifølge denne tegningen så vil jeg "vesleknipen" under bilde og tekst oppe til høyre med følgende <li> på adresse og infoen der. Kan jeg bygge videre på den koden jeg har og hva må legge til for å få den som nevnt over?

 

Kan bildegalleri eller lignende som dette gjøres uten php?

Lenke til kommentar
Inc

Inc

Skrevet
  • Forfatter
Skrevet

arg!, dette skulle da ikke være så vanskelig. Hjelp meg litt da!!

Tenk deg en ramme b=600px og h=150px. til venstre ett bilde, under bilder et ord, til høyre for bilde er det tekst og info om bildet.

Dette går tydeligvis ikke hos meg, sikkert noe jeg overser hele tiden men med en gang jeg legger til <h4> eller <ul>, <li> så flytter hele teksten seg....

Ja, jeg vet, nabber skikkelig.

Lenke til kommentar
maZe--

maZe--

Skrevet
Skrevet (endret)

hmm. I slike tilfeller så gjør jeg det på en annen måte. Du har laget en div som bildet ligger i og en div som teksten ligger i? Har jeg rett?

Da i tilfellet så kan du jo legge lenken i samme div som bildet ligger i, da vil det vell plassere seg under bildet automatisk om teksten står bak bildet i kodingen.

 

Du lager på en måte to "bokser" som dataen ligger i. Dvs, du legger bildet og lenken i samme div og resten av teksten i en annen boks.

 

Så i disse boksene setter du f.eks. float:left; på den boksen som bildet skal være i.

 

Og float:right; i den boksen som teksten ligger i.

 

På bunnen av alt dette bruker du bare: <div style="clear:both;"></div>

 

Prøv dette, ta backup av det du har nå, og prøv. Dvs, du må vell lage nytt noe av det, eller bare legge til litt og fjerne litt. Men ta backup av arbeidet som du har gjort til nå før du forandrer på noe :)

Endret av maZe--
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
×
×
  • Opprett ny...