Hjelp med webdesign[VGS] (CSS/HTML)

MaxP2P · 23. januar 2007

(Regner med at det kommer noen flere problemer gjennom prosjektet, så jeg lager bare en felles tråd nå for alle spørsmål fra meg ang. dette prosjektet ^^)

Målet er å gjøre så mye som mulig i CSS, og 0 tabeller.

Er ferdig med layout'en i PS, så nå gjenstår det bare å få det hele til å funke..

Akkurat nå sliter jeg med meny'en, som jeg har prøvd å få til å funke siden dagen startet.

Sånn skal siden se ut til slutt (+innhold seff):

Meny Problemet:

Riktig i Dreamweaver 8 (mer eller mindre ihvertfall):

Feil i FireFox:

HTML BODY Koden:

<body>
<div id="header"></div>
<div id="menu">
<ul>
 <li class="hjem">
 	<p>Hjem</p>
 </li>
 <li class="info">
 	<p>Info</p>
 </li>
 <li class="bestill">
     <p>Bestill</p>
 </li>
 <li class="omoss">
     <p>Om Oss</p>
 </li>
</ul>
</div>
<div id="container">
</div>
</body>

Meny delen av CSS koden:

#menu p {
display: none;
}
#menu ul li {
display: inline;
}
.hjem {
background: url("images/buttons/hjem1.gif") no-repeat;
width: 200px;
position: absolute;
left: 0px;
visibility: visible;
}
.info {
background: url("images/buttons/info1.gif") no-repeat;
width: 200px;
position: absolute;
left: 200;
visibility: visible;
}
.bestill {
background: url("images/buttons/bestilling1.gif") no-repeat;
width: 200px;
position: absolute;
left: 400;
visibility: visible;
}
.omoss {
background: url("images/buttons/omoss1.gif") no-repeat;
width: 200px;
position: absolute;
left: 600px;
visibility: visible;
}

Så, er det noen sikkelig flinke folk her som kunne være så snill å hjelpe? ^^ (Si ifra om jeg skal legge ut hele CSS koden)

(Alt forslag til hvordan jeg kunne ha gjort det bedre er _meget_ velkommen!)

mikk- · 23. januar 2007

Mitt tips er å lære seg å gjøre det uten designmode. I designmode blir alt satt med absolutt posisjon og det blir produsert unødvendig mye kode, både HTML og CSS. Alt blir vanskelig å ha med å gjøre.

Les gjennom htmldog.com, så kan du det meste allerede. Du imponerer garantert lærern din også!

MaxP2P · 23. januar 2007

Jeg har ikke brukt designmode.

Skulle bare vise til at det ble riktig der, men ikke i browseren. Noe som virket litt merkelig.. Da det vanligvis er det motsatte som skjer... o.O

Alt var "hardkodet", både i HTML og CSS.

Svinat · 23. januar 2007

Prøv heller å bruke float og margin istedenfor position: absolute.

Garreth · 23. januar 2007

<body>
<h1 id="header">Sidenavn</h1>
<ul id="meny">
<li class="hjem">Hjem</li>
<li class="info">Info</li>
<li class="bestill">Bestill</li>
<li class="omoss">Om Oss</li>
</ul>
<div id="container">
<h2>Overskrift</h2>
<p>Paragraf</p>
</div>
</body>

Sånn ca burde htmlen din se ut. <p> elementet brukes bare for paragrafer, og skal derfor ikke være med i liste (<li>) elementet.

Når du tester utseende, så nytter det ikke å se det i dreamweaver sin view, test i FF/Opera/Safari først. Når alt stemmer der, kan du teste siden din i IE og fikse ulikhetene.

MaxP2P · 26. januar 2007

Nytt Spørsmål (aka problem )

Jeg har prøvd alt jeg vet om, men jeg finner ikke ut hvordan jeg får en ting på siden til å justere seg i forhold til innholdet og ikke browseren. Eller, hele siden skal tilpasse seg browseren, da den skal være midstillt, men jeg ønsker at f.eks. knappenes posisjonering skal være i fohold til meny bakgrunnen, og ikke browser viduet, siden da blir alt messed up.

Det som er merkelig er at "top" funger som den skal, og justerer seg der den skal være. Men det er "left" som av en eller annen grunn følger browser vinduet.

Jeg skal prøve å forklare så kort som mulig

4 knapper. "Under" dem er en 22 pixel høy bakgrunn, over den igjen er en 141pixel høy header. Begge er "importert" gjennom CSS og satt til "center".

MenyBG og Header fungerer som de skal, men så skal knappene plasseres. Og da kommer problemet over inn i bildet.

Her er kodene:

<body>
<div id="header"></div>
<div id="menu">
<div id="menubuttons">
<a class="menulinks" href="#"><img id="hjem" height="20" width="200" alt="hjem" src="images/buttons/hjem1.gif" /></a>
<a class="menulinks" href="#"><img id="info" height="20" width="200" alt="info" src="images/buttons/info1.gif" /></a>
<a class="menulinks" href="#"><img id="bestill" height="20" width="200" alt="bestill" src="images/buttons/bestilling1.gif" /></a>
<a class="menulinks" href="#"><img id="omoss" height="20" width="200" alt="omoss" src="images/buttons/omoss1.gif" /></a>
</div>
</div>
<div id="container">
</div>
</body>

/* TCM-Klinikken Master Style Sheet */

/* -=( Header )=- */
#header {
background: url("images/header1.gif") no-repeat center;
height: 141px;
}
 
/* -=( Menu )=- */
#menu {
background: url("images/menu_bg1.gif") no-repeat center;
height: 22px;
}
#menu a.menulinks:visited img {
border: none;
}
#hjem {
position: relative;
left: 0px;
}
#info {
position: relative;
left: 0px;
}
#bestill {
position: relative;
left: 0px;
}
#omoss {
position: relative;
left: 0px;
}

/* -=( Background )=- */
body {
background-color: #417485;
margin: 0;
}
#container {
background: url("images/bg1.gif") repeat-y center;
}
#container p {
position: relative;
left: 0px;
}

Resultat:

Så som dere ser, så plasserer knappene seg riktig på den vertikale siden, men feil horisontalt.

Og hvis jeg putter f.eks "left: 20%;", så blir det 20% i forhold til browser vinduet, og ikke innholdet. Og det er det motsatte som jeg prøver å få til.

Wizendraw · 26. januar 2007

Nå har jeg ikke lest koden din, men har du puttet alt innholdet inni en container-div? Da skulle du slippe sånne problem.

MaxP2P · 26. januar 2007

Har ikke gjort det nei, eller ihvertfall ikke på header og meny'en. Da jeg ikke så vitsen i det.

Men tok og prøvde det nå nettopp for å se om det faktisk utgjor noe forskjell, men uten suksess.

Endret 26. januar 2007 av MaxP2P

funkweb · 27. januar 2007

Var noe vagt å forstå deg, men antar du ønsker at "menyen" skal ligge rett under banner og er like bred som banneret selv?

Du kan jo ha en eneste div omkring hele koden din hvor den har en fast bredde og midtstilt den.

Så kan du begynne med og legge nye div inne der med høyder.

Kast bort position: relative greiene.

Avean · 27. januar 2007

Prøv heller å bruke float og margin istedenfor position: absolute.

7781655[/snapback]

For enkle layouts så er det greit men hvis du skal posisjonere elementer på virkelig rare plasser så må man bruke position: absolute eller relative.

Svinat · 27. januar 2007

Prøv heller å bruke float og margin istedenfor position: absolute.

7781655[/snapback]

For enkle layouts så er det greit men hvis du skal posisjonere elementer på virkelig rare plasser så må man bruke position: absolute eller relative.

7808746[/snapback]

Joda, men utifra de tre første bildene så trenger han garantert ikke position: absolute eller relative.

MaxP2P · 27. januar 2007

Var noe vagt å forstå deg, men antar du ønsker at "menyen" skal ligge rett under banner og er like bred som banneret selv?

Du kan jo ha en eneste div omkring hele koden din hvor den har en fast bredde og midtstilt den.

Så kan du begynne med og legge nye div inne der med høyder.

Kast bort position: relative greiene.

7807781[/snapback]

Resultat:

Som du kan se her, så plasserer menyen seg riktig på den vertikale siden, men feil på den horisontale.

Banner og menyBG er på 820px (800 egentlig, men jeg tok litt ekstra med). Knappene er totalt på 800px (200px hver).

Så det er bare det å få dem riktig på plass, uten å bruke position: absolute.

position:relative var bare noe jeg prøvd for å se om jeg kan "tvinge" dem på riktig plass, men da viste det seg at "left" var beregnet ut i fra browser vinduet og ikke selve siden.

Endret 27. januar 2007 av MaxP2P

funkweb · 27. januar 2007

Hvis jeg var deg ville jeg heller brukt 780px som totale bredde pga. brukere med 800x600 oppløsning vil ha problemer med å se hele siden i 800px bred. (Som vil ende opp med at brukere må scrolle horisontalt )

Som noen nevnte over så kan du bruke float isteden for position.

Ja la oss ta en enkelt oppgave hvor du har en område hvor det er 780px bred og midtstilt.

<div id="root">

<div id="banner">Banner område</div>

<div id="meny">Meny område</div>



<div id="content">Her kommer innholdet</div>

</div>

CSS:

body {
text-align: center;

}

#root {

width: 780px;

margin: 0 auto; /* FireFox osv.. */

}

Osv.. du fortsetter med de andre, men der trenger du ikke noe bredde da "root" allerede har en bredde, men du kan legge til høyde på f.eks banner, menyen.

Håper det hjelper deg litt på vei, og når du ønsker en 2 kolonner eller noe så spør du igjen

MaxP2P · 27. januar 2007

Tusen takk ^^

Ser ut som jeg har misforstått funksjonen til en "global" div tag.

Men nå har et nytt spørsmål kommet opp. Hvordan sentrerer jeg det hele?

Jeg hørte at "<center></center>" i HTML er en fy fy å bruke når man samtidig bruker CSS mye. Men den eneste align funksjonen jeg vet om i CSS er "vertical-align", og det blir jo litt feil. xD

Tusen takk igjen for all hjelpen ^_^

Endret 27. januar 2007 av MaxP2P

Wizendraw · 27. januar 2007

margin-left:auto; og margin-right:auto;

bør gjøre susen.

Kan også skrives slik:

margin:0 auto;

MaxP2P · 28. januar 2007

Det der fungerte sånn halvveis (bokstaveligtalt )

Banner og menyBG er helt perfekt, men så begynner det å spore litt av. Knappene er ikke helt på plass, og innholdet er også litte feil

Her er resultatet ved bruke av "margin: 0 auto;":

Resultatet ved bruk av "<center>":

Et annet spørsmål xD (unnskyld )

Hvorfor i all verden er det et mellomrom mellom meny'en og innholdet?

Her er den siste HTML koden og CSS koden:

/* -=( GPC )=- */
body {
background-color: #417485;
margin: 0;
}
#gpc {
width: 820px;
margin: 0 auto;
}

/* -=( Header )=- */
#header {
background: url("images/header1.gif") no-repeat;
height: 141px;
}
 
/* -=( Menu )=- */
#menu {
background: url("images/menu_bg1.gif") no-repeat;
height: 22px;
}
#menu a img {
width: 200px;
height: 20px;
border: none;
}

/* -=( Content )=- */
#content {
background: url("images/bg1.gif") repeat-y;
}

Edit: Jeg vet at den er fortsatt 820px, men i oppgaven så står det at vi skal designe for 1024, så da er det kanskje like greit ^_^

Endret 28. januar 2007 av MaxP2P

funkweb · 28. januar 2007

mellomrom kan du fjerne ved å legge til Universal Selector.

f.eks:

* { margin: 0; padding: 0; }

MaxP2P · 28. januar 2007

Yeay ^^

Tusen takk

MaxP2P · 29. januar 2007

Me again

Har de siste timene prøvd å finne en enkel og rask metode for å la brukere søke igjennom innholdet på siden (eller noen visse deler av siden ihvertfall).

Jeg skal lage en liten "informasjons portal". Men er litt usikker på hvordan jeg skal gjennomføre dette her.

Tanken er da slik:

Brukeren kommer til info. portalen. Og ser et felt der han/henne kan skrive inn det de ønsker å vite mer om. La oss si de søker på "aromaterapi". Så får de opp artikkelen som handler om dette.

Det trenger ikke å være noe "smart" søkemotor.

I min primitive hode ser jeg for meg at jeg skriver alle mulige stikkord som jeg kommer på. Også linker jeg dem dirrekte til den og den artikkelen. Hvis de søker på et stikkord som ikke finnes, kommer det bare opp en liten feilmelding.

Min "liksom kode" ser slik ut:

stikkord="aromaterapi, aroma, aroma terapi, terapi";
{
if stikkord = correct;
show = "info_portal/aroma.html";
}
else = "info_portal/feil.html";

Igjen, dette er bare et "liksom språk". Prøver bare å gjøre mitt beste for å forklare hva det er at jeg vil gjøre xD

Så ingen søking inne i selve innholdet av artikkelen. Bare dirrekte linker på en måte.

Alle svar settes utrolig stor pris på ^

MaxP2P · 30. januar 2007

Sorry for at jeg maser så mye, men er det noen som har noe tips om dette?

Min deadline begynner å komme farlig nært, og hele greie ryker til helvete om jeg ikke får denne "mini informasjons portalen" gjort.

Jeg har funnet en del PHP script på nettet.

Men for det første så vil jeg gjerne unngå å copy-paste.

Men et enda større problem er at vi ikkke har støtte for MySQL og PHP på skolen. (Kan jo evnt. gjøre dette hjemme, og hoste selv. Men da får jeg ikke gjort noe på skolen <.<)

Hjelp med webdesign[VGS] (CSS/HTML)

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Hvem er aktive 0 medlemmer