Gå til innhold

Hjelp til oppsett av table/div på enkel side

Anonym234

Anbefalte innlegg

Anonym234

Anonym234

Skrevet
Skrevet

Jeg skjønner nada av table's og div og håper noen gidder å hjelpe meg, helt nybegynner.

Siden skal være veldig enkel og grei og skal inneholde følgende (som man kan se på bildet under);

 

 

Øverst på siden skal det være et bilde.

Så kommer menyen.

Under der skal all teksten være, altså innholdet.

 

Jeg vil det skal være en stor ramme rundt alt sammen, så ikke ting "flyter rundt" i de forskjellige skjermoppløsningene. Da menyen er dropdown, så ikke menyvalgene ytterst på sidene lager en sideways scroll når man klikker på den.

 

 

 

 

 

Link. Men det er bare bilde og menyen der.

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
TLZ

TLZ

Skrevet
Skrevet

Vel, bare putt alt inni en div-tag?

 

<div id="StinesDiv">
<!-- INNHOLD!!11 -->
</div>

 

og så setter du en fast bredde på den i CSS'n din

#StinesDiv
{
width: 700px;
}

 

PS: Aldri bruke tabeller til å definere layout, det er fy-fy! (Tabeller skal kun brukes til... *trommevirvel* tabeller. Dvs. lister med flere kolonner eller lignende.)

 

Generelt sett så er HTMLdog en veldig bra side til informasjon om HTML og CSS. Neste gang du lurer på noe så kan det være en god ide å sjekke der før du spør på forum. :)

Lenke til kommentar
Anonym234

Anonym234

Skrevet
  • Forfatter
Skrevet

Skal hele inn i den div'n? Meny og alt? Skal jeg ikke ha som jeg hadde to div'er? En container og en main?

 

Sida klikker jo i vinkler i explorer... Menyen kommer på to linjer, (den ene tittelen blir borte. "okey") den scroller sideveis, menyen kommer "under" teksten når man klikker på menyen. Det funker fint i FF. Hvorfor ikke i IE?

Her er link.

 

Og den tabellen fikk jeg tips om, så ikke ting skal "flyte rundt" i forskjellige oppløsninger. Men har tatt den vekk nå. :) (Ting flyter rundt :O )

 

 

Beklager dumme spørsmål. :)

Lenke til kommentar
mikk-

mikk-

Skrevet
Skrevet 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Stines superside</title>
<style>
* {
 margin: 0;
 padding: 0;
}
#wrap {
 border: 10px solid #000;
 width: 600px;
 margin: 30px auto;
}
h1 {
 height: 150px;
 text-indent: -9999px;
 background: url("logo.png");
}
#menu {
 list-style-type: none;
}
#menu li {
 display: inline;
 width: 150px;
 text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Stines superside</h1>
<ul id="menu">
 <li>Menyvalg 1</li>
 <li>Menyvalg 2</li>
 <li>Menyvalg 3</li>
</ul>
<h2>Innhold</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>

 

Ikke at jeg har testa, men der har du vel noe grunnleggende.

Lenke til kommentar
datech

datech

Skrevet
Skrevet
Skal hele inn i den div'n? Meny og alt? Skal jeg ikke ha som jeg hadde to div'er? En container og en main?

 

Sida klikker jo i vinkler i explorer... Menyen kommer på to linjer, (den ene tittelen blir borte. "okey") den scroller sideveis, menyen kommer "under" teksten når man klikker på menyen. Det funker fint i FF. Hvorfor ikke i IE?

 

Hei

 

Tror grunnen til at siden klikker i "vinkler" er at du har glemt å lukke noen tagger, slik at lorem teksten din i avsnittene kommer inn i listen din. Hvis du legger til "</ul>" etter den siste "</li>" så vil det nok bli bedre.

Lenke til kommentar
Anonym234

Anonym234

Skrevet
  • Forfatter
Skrevet
Hei

 

Tror grunnen til at siden klikker i "vinkler" er at du har glemt å lukke noen tagger, slik at lorem teksten din i avsnittene kommer inn i listen din. Hvis du legger til "</ul>" etter den siste "</li>" så vil det nok bli bedre.

Takk! :)

 

Men hvorfor funker sånne feil i FF og ikke i IE?

Lenke til kommentar
datech

datech

Skrevet
Skrevet
Takk! :)

 

Men hvorfor funker sånne feil i FF og ikke i IE?

 

Hei

Det kunne nok likegodt vært omvendt, dvs. feilen fungerte i IE og ikke i FF. Forenklet sett så blir HTML dokumenter kjørt av nettleseren uansett feil i koden. Hvordan/hvilken feilhåndtering nettleser har er ikke godt å si.

 

Egentlig burde det jo vært slik at nettleser nektet å vise et HTML dokument med feil, og med referanse til feilen, slik at man lettere kunne rette opp feilen, men slik er det jo ikke med HTML.

 

Mitt tips er å være nøye under kode skrivning og benytte seg av de muligheter som finnes.

 

Det er blant annet mulig å legge til blanke linjer mellom kode for å adskille kode-bolker, det er mulig å legge inn kommentarer, det er mulig å bruke innrykk (tab eller mellomrom) for å adskille kode-bolker.

 

Videre vær nøye på å lukke tagger som bør lukkes, dette gjelder blant annet <p>, <div>, <ul> og <li>

 

Selv om det i HTML er mulig å skrive:

<p>Lorem ipsum....

 

Så ikke gjør det, men husk å lukke taggen, slik:

<p>Lorem ipsum...</p>

 

Det er også viktig å være nøye på CSS-dokumenter, da der er det mye lettere at det oppstår feil.

 

Når det gjelder din side så vær obs på at menyen din bruker blant annet float og position. Dette er ikke det enkleste innen CSS og du kan fort få slite litt med den kjente "uff, siden min vises ikke likt i alle nettlesere"

 

Menyen din slik den er nå vil nok ikke vises i Internet Explorer 6.

Lenke til kommentar
Anonym234

Anonym234

Skrevet
  • Forfatter
Skrevet
Når det gjelder din side så vær obs på at menyen din bruker blant annet float og position. Dette er ikke det enkleste innen CSS og du kan fort få slite litt med den kjente "uff, siden min vises ikke likt i alle nettlesere"

 

Menyen din slik den er nå vil nok ikke vises i Internet Explorer 6.

Jeg har ikke laget menyen selv, så jeg har lite peiling på det. Går det ann å fjerne float og position, evnt erstatte det med noe annet, så det fungerer i IE 6?

Lenke til kommentar
datech

datech

Skrevet
Skrevet (endret)
Jeg har ikke laget menyen selv, så jeg har lite peiling på det. Går det ann å fjerne float og position, evnt erstatte det med noe annet, så det fungerer i IE 6?

 

Hei

 

IE 6 har støtte for float og position, men dog noe buggy.

 

CSSplay har en drop-down meny, der det brukes teknikk med betingede kommentarer (conditional comments - cc) og som skal fungere i IE 6.

http://www.cssplay.co.uk/menus/final_drop.html

 

I koden vil du se cc som:

<!--[if lte IE 6]><table><tr><td><![endif]-->

 

Betingede kommentarer er rettet kun mot Internet Explorer, andre nettlesere overser de, inkludert validatoer. Dette siden de er oppbygd som ved bruk av HTML kommentar kode ()

 

if lte IE 6 bør jo egentlig bety hvis mindre enn (less than) IE 6, men det er vel faktisk slik at lte IE 6 betyr hvis mindre enn elller lik IE 6. (tar jeg ikke helt feil)

 

Du kan bruke cc i forskjellige former, f.eks. rettet mot kun IE 7 så blir det:

<!--[if IE 7]><p>Dette vises kun for IE 7</p><![endif]-->

 

En mulighet kan jo også være å bruke cc til å gi de med IE 6 eller mindre beskjed om at siden ikke fungerer for IE 6 og så be de om å oppgradere sin nettleser, gi link til IE 7, samt andre nettlesere som Firefox og Opera.

Du kan da lage en meldingsboks som vises på toppen av siden ved bruk av cc:

 

<!--[if lte IE 6]>:::: Her legges HTML kode for meldingsboks inn ::::<![endif]-->

 

Du kan jo også prøve å søke litt på Internett etter "css dropdown menu", men jeg vil tro at den fra CSSplay er blant det enkleste, såfremt du ikke vil bruke litt Javascript, for da finnes blant annet Suckerfish teknikken.

 

http://htmldog.com/articles/suckerfish/dropdowns/

 

http://www.alistapart.com/articles/dropdowns/

Endret av datech
Lenke til kommentar
Anonym234

Anonym234

Skrevet
  • Forfatter
Skrevet

Dette "if IE" skjønte jeg ikke så mye av. Hvor skal det plasseres? Før og etter menyen?

 

Jeg så på den CSSplay, men fant ikke noe sted å få koden (?), dvs jeg kikka jo på kilden, er det der man må ta det fra? Gjorde det og det funka ikke helt i FF eller IE.

Lenke til kommentar
datech

datech

Skrevet
Skrevet
Dette "if IE" skjønte jeg ikke så mye av. Hvor skal det plasseres? Før og etter menyen?

 

Jeg så på den CSSplay, men fant ikke noe sted å få koden (?), dvs jeg kikka jo på kilden, er det der man må ta det fra? Gjorde det og det funka ikke helt i FF eller IE.

 

Hei

 

Ja, det virker som om du må hente CSS fra kilden.

Det er da det som ligger under "This copyright notice must be untouched at all times." på siden:

http://www.cssplay.co.uk/menus/final_drop.html

 

Selve HTML koden for menyen kan hentes fra:

http://www.cssplay.co.uk/menus/css/final_drop.txt

 

Når du skal legge dette inn i et HTML dokument så er det viktig at du husker på å deklarere en Doctype.

http://www.alistapart.com/articles/doctype/

 

Bruk f.eks. den for HTML 4.01 Transitional

 

Da kan du sette sammen HTML dokumentet ala:

 

[ legg til Doctype her]
<html>
<head>
<style type="text/css">

[ Legg til CSS her ]

</style>
</head>
<body>

[ legg til HTML kode for meny her ]

</body>
</html>

 

Når det gjelder "if IE" så er det for menyen til CSSplay inkludert flere steder i koden for menyen, dette ser du i HTML koden for menyen:

http://www.cssplay.co.uk/menus/css/final_drop.txt

 

I koden finner du if lte IE 6, dette benyttes for å sette inn en tabell for IE 6 og mindre; for å få menyen til å fungere for IE 6 og mindre.

Lenke til kommentar
datech

datech

Skrevet
Skrevet
Hva er alt dette snakket om conditional comments, datech?

 

Lte betyr forresten less than or equals, siden du lurte på det.

 

 

Stine: Går for HTML Dogs Sons of Suckerfish, du. Koden datech viser til er rett og slett forferdelig, når det kan gjøres så mye enklere.

 

Hei

 

Forklarte nå lte rett så ingen skade skjedd, selv om det er helt korrekt lte = mindre enn eller lik.

 

Leser du tråden så vil du jo se "CSSplay er blant det enkleste, såfremt du ikke vil bruke litt Javascript", der jeg jo henviser til Suckefish.

 

Nå vet ikke jeg hva du sikter til med forferdelig 

<!--[if lte IE 6]><table><tr><td><![endif]-->

 

Er det så forferdelig ?

 

Conditional comments er absolutt ingen dårlig ide, og siden det på den ene siden kan sees på som kommentarer, så er det jo ikke grunn til å kommentere en kommentar som forferdelig ;-)

 

Derimot så er det en dårlig ide å lage en meny som ikke vil fungere hvis bruker har slått av Javascript og mon tro om ikke det gjelder for suckerfish og IE 6. Da er det så enkelt som det kan bli (ingen meny).

Lenke til kommentar
Haraldson

Haraldson

Skrevet
Skrevet
Derimot så er det en dårlig ide å lage en meny som ikke vil fungere hvis bruker har slått av Javascript og mon tro om ikke det gjelder for suckerfish og IE 6. Da er det så enkelt som det kan bli (ingen meny).

Et gyldig poeng, dersom javascriptet ikke spesifikt rettet seg mot IE6, hvor de aller, aller, aller fleste har JS aktivert likevel.

 

Hva som er ille med x10 conditional comments for å legge til tabeller i en meny? Ikke bare blir koden ekstremt rotete og stygg, men det er også unødvendig.

Lenke til kommentar
datech

datech

Skrevet
Skrevet
Et gyldig poeng, dersom javascriptet ikke spesifikt rettet seg mot IE6, hvor de aller, aller, aller fleste har JS aktivert likevel.

 

Hva som er ille med x10 conditional comments for å legge til tabeller i en meny? Ikke bare blir koden ekstremt rotete og stygg, men det er også unødvendig.

 

Hei,

Jo helt klart kan en jo overse de få (hvis noen) av IE 6 brukere med javascript slått av. Men likevel er dette dårlig. Å ikke vise meny er jo en alvorlig feil, ville vært noe helt annet var det javascript som f.eks. gjorde at et bilde ikke ble vist hvis bruker hadde javascript av.

 

Joda, koden kan nok også bli rotete og stygg med conditional comments (CC) blandet inn i hytt og pine. Ville jo helt klart vært penere med ingen CC eller CC som inkluderte stilark rettet mot f.eks. IE 6.

 

Men mener nå at CC er betydelig bedre enn CSS hacks og for denne dropdown menyen fra CSSplay er det vel nødvendig med CC.

 

En annen sak er jo at det er alternativer til dropdown meny.

F.eks:

- horisontal meny med undermeny og da uten bruk av CC i HTML kode eller bruk av Javascript.

eller

- bruk av sidemeny i tillegg til en hovedmeny

 

Er det snakk om statiske sider som lages ved bruk av teksteditor så vil vel også begge ovenfor bli lettere å vedlikeholde, kontra en dropdown meny der alle sider konstant må oppdateres hvis det skal legges til en ny link på menyen.

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