Gå til innhold

Hjelp med webdesign[VGS] (CSS/HTML)

MaxP2P

Av MaxP2P
i Programmering og webutvikling

Anbefalte innlegg

MaxP2P

MaxP2P

Skrevet
Skrevet

(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):

helelayout6te.th.jpg

 

Meny Problemet:

Riktig i Dreamweaver 8 (mer eller mindre ihvertfall):

dwriktig6sg.th.jpg

 

Feil i FireFox:

fffeil9wd.th.jpg

 

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!)

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
mikk-

mikk-

Skrevet
Skrevet

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å!

Lenke til kommentar
Garreth

Garreth

Skrevet
Skrevet 

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

Lenke til kommentar
MaxP2P

MaxP2P

Skrevet
  • Forfatter
Skrevet

Nytt Spørsmål (aka problem :p)

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 :p

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:

webfeil1tj6.th.jpg

 

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.

Lenke til kommentar
MaxP2P

MaxP2P

Skrevet
  • Forfatter
Skrevet (endret)

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 av MaxP2P
Lenke til kommentar
funkweb

funkweb

Skrevet
Skrevet

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.

Lenke til kommentar
Avean

Avean

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

Lenke til kommentar
Svinat

Svinat

Skrevet
Skrevet
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. :)

Lenke til kommentar
MaxP2P

MaxP2P

Skrevet
  • Forfatter
Skrevet (endret)
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:

webfeil1tj6.th.jpg

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 av MaxP2P
Lenke til kommentar
funkweb

funkweb

Skrevet
Skrevet

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.

 

<!-- Hvor "root" vil være den som styrer siden din, dvs bredden. -->

<div id="root">

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

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

    <!-- Her kan du legge til 2 eller 3 kolonner innenfor content om ønskerlig ved hjelp av float -->

    <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 :)

Lenke til kommentar
MaxP2P

MaxP2P

Skrevet
  • Forfatter
Skrevet (endret)

Tusen takk ^^

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

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 av MaxP2P
Lenke til kommentar
MaxP2P

MaxP2P

Skrevet
  • Forfatter
Skrevet (endret)

Det der fungerte sånn halvveis (bokstaveligtalt :p)

 

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 :p

 

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

webfeil2ue0.th.jpg

 

Resultatet ved bruk av "<center>":

webfeil3za3.th.jpg

 

Et annet spørsmål xD (unnskyld :p)

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

 

Her er den siste HTML koden og CSS koden:

html1af2.th.jpg

 

/* -=( 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 :p ^_^

Endret av MaxP2P
Lenke til kommentar
MaxP2P

MaxP2P

Skrevet
  • Forfatter
Skrevet

Me again :p

 

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å ^

Lenke til kommentar
MaxP2P

MaxP2P

Skrevet
  • Forfatter
Skrevet

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

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