Hjelp med html og css. 3 koloner ved siden av hverandre

agm · 2. april 2012

Du kan plassere #logo 50% fra venstre, og så justere den tilbake ved å sette en negativ margin. F eks:

#logo {
position:absolute;
left:50%;
margin-left:-250px;
}

D02 · 2. april 2012

Prøver å forklare det på nytt : )

på bildet har jeg prøvd å skisse hvordan det er nå, og hvordan jeg vil ha det.

Sånn det er nå, er logoen 25% fra venstre kant. Når jeg forstørrer vinduet til nettleseren vil logoen plassere seg 25% fra venstre i forhold til størrelsen. Med dette har jeg mindre kontroll over hvordan siden blir seende ut for andre. Som man ser på bilde to, så havner logoen lengre fra menybaren (svart rute)

I del to der det er står "riktig" i grønn skrift er logoen på samme sted uansett om jeg forstørrer vinduet eller ikke. Dette er det jeg vil oppnå.

NB: jeg har gått vekk fra å ha tre div, og har bare en der menyen er i center og logoen skal være 50 px fra

center.

Håper noen forstår hva jeg vil oppnå

Bozzeye · 2. april 2012

Hva med å lage en div som du slenger alt innhold i? Sett en bredde for dette elementet samt midtstill med margin: 0 auto;.

D02 · 2. april 2012

Får prøve det

agm · 2. april 2012

Håper noen forstår hva jeg vil oppnå

Jeg forstår hva du mener - og svarte nettopp et svar som skal gjøre akkurat som du ba om...

http://jsfiddle.net/zErdh/

D02 · 2. april 2012

Håper noen forstår hva jeg vil oppnå

Jeg forstår hva du mener - og svarte nettopp et svar som skal gjøre akkurat som du ba om...

http://jsfiddle.net/zErdh/

Ah. takker. Det ser veldig riktig ut Har ikke støtt på problemer enda

Skulle ikke være så lett å lage nettside gitt men moro er det.

NicholasWalkerHD · 8. april 2012

Leste ikke gjennom svarene så jeg vet ikke om det er postet men hvis jeg ikke har forstått feil så er det dette du vil ha. Da er altså display:inline-block; det du leter etter når du skal få div elementer til å ikke lage en linebreak.

#logo {
min-height:100px;
min-width:100px;
display:inline-block;
background-color:#000;
}
#meny {
min-height:100px;
min-width:100px;
display:inline-block;
background-color:#FF000;
}
#høyre {
min-height:100px;
min-width:100px;
display:inline-block;
background-color:#000;
}

<html>
<head>
<title>Hjem</title>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
</head>
<body>
 <div id="logo">
 Logo
 </div>
 <div id="meny">
 Meny
 </div>
 <div id="høyre">
 </div>
</body>
</html>

D02 · 9. april 2012

Skal se på det. Takk

D02 · 9. april 2012

Hvis jeg bestemmer at siden er 1000px bred. vil jeg da få problemer med noen pcer som har for liten skjerm da eller funker 1000px på de fleste skjermer? Eneste negativet da blir vel at man må skrolle til siden for å se innholdet da?

edit: tenker da spesielt på diskusjon.no som er car 1000px bred, de har vel da tat høyde for alle skjermer?

Endret 9. april 2012 av D02

sunsunsun · 9. april 2012

De fleste PC-er har skjermer som klarer 1000px i bredden (kilde: w3schools.com/browsers/browsers_display). 960px er det som er normalt for en webside.

Hvis du vil at websiden skal fungere bra på mindre skjermer som f. eks mobiler, så burde du lære deg responsive web design.

Et eksempel:

css-tricks.com

Prøv å endre størrelse på vinduet.

D02 · 10. april 2012

Trenger raskt hjelp. Siden jeg har jobbet mye med, og endelig fått til å funke, klarte jeg å save over...

Jeg har den åpnet i safari, så tenkte jeg bare kunne hentet koden ut derifra, som med chrome, men får bare opp html ikke css. Noen som vet hvordan jeg får den opp. Trenger hjelp raskt, da jeg ikke kan lukke siden :/

eventuelt lar pcen stå på til i morgen.

MikkelRev · 10. april 2012

hvis du kan vise html-kildekoden i safari, så prøv å klikk på referansene til css-filene i koden,

agm · 10. april 2012

1. Du kan åpne Web Inspector ved å trykke ⌥ + ⌘ + i (Mac) eller Ctrl + Alt + i (Win).

Her vil du se kildekoden, men kan ikke kopiere herfra.

2. Velg fanen Ressurser / Resources.

3. Til venstre ligger det nå et mappetre. Her ligger alt av filer - HTML, CSS, JS osv.

4. Trykk den du ønsker for å se kilden, marker og kopier.

Håper du fikk berget det du trengte!

Endret 10. april 2012 av agm

D02 · 10. april 2012

TUSEN TAKK Da kan jeg sove godt i natt : )

brukte denne metoden her ⌥ + ⌘ + i funket ikke for meg, så søkte

http://mactips.info/2010/07/use-safari-5s-web-inspector

D02 · 12. april 2012

Nytt spørsmål. Har et bilde i en <img> tag. Inni de forskjellige er det unike bilder. i css bruker jeg komandoen .bilde:hover {background-image:url(bilde1.png); } problemet er at bildet kommer bak bildet i <img> taggen. Hvordan kan jeg få et bilde over et annet når man har musen over?(hover)

Etter noen søk på google virker det som om det ikke er noen funksjoner for å få forgrund over en <img> tag.

sunsunsun · 12. april 2012

Har du prøvd å legge en div rundt img-tagen, og legge hover på div-en? Kanskje ikke den beste løsningen, men tror den kommer til å gjøre det du vil.

Edit:

Det var noe sånt jeg tenkte på:

http://jsfiddle.net/4NG5m/1/

Det er en løsning dersom samme bildet alltid skal vises.

Dersom hvert bilde skal ha et eget hover-bilde, så er sprite the way to go. Men i et bilde galleri er det en dårlig idé.

Endret 12. april 2012 av elos

agm · 12. april 2012

Prøv å bruke CSS Sprites. I praksis legger du da flere bilder ved siden av hverandre i samme fil, setter dette bildet som bakgrunn på et element og endrer bakgrunnsposisjon når musa peker på elementet.

Eksempel: http://jsfiddle.net/4NG5m/

Bolson · 12. april 2012

Nytt spørsmål. Har et bilde i en &--#60;img&--#62; tag. Inni de forskjellige er det unike bilder. i css bruker jeg komandoen .bilde:hover {background-image:url(bilde1.png); } problemet er at bildet kommer bak bildet i &--#60;img&--#62; taggen. Hvordan kan jeg få et bilde over et annet når man har musen over?(hover)

Etter noen søk på google virker det som om det ikke er noen funksjoner for å få forgrund over en &--#60;img&--#62; tag.

En bakgrunn (som er det du angir med background-image) vil alltid komme bak innholdet i en tag, f.eks bilde i en img-tag. Samme gjelder vanlig innhold.

For å løse ditt problem bør både det vanlige bilde og hover-bilde legges som bakgrunn. Dvs at du lager en div som du setter fast størrelse på (likt størrelse på bilde), og bruker CSS til å generer både bilde og hover.

f.eks omtrent som dette:

&--#60;div id="image1" class="image"&--#62;&--#60;/div&--#62;
følgende css.
.image {
width: 100px;
heigth: 100px;
float: xxx
osv
}
#image1 {
background-image: url(image1.jpg), no-repeat top left;
}
#image1:hover {
background-image: url(image1hover.jpg), no-repeat top left;
}

Du kan fint bruke sprites på bilda, da det gjør siden raskere å laste.

Når jeg ikke vet mer om hvor på siden plasseringen er, så kan jeg ikke si noe om bruk av float, position etc.

Jeg bruker id på div-en fordi jeg regner med at du skal ha ulike bilder i hver tag. Da kan jeg bruke class til å gi css-en som er lik for alle bilder og id for hver div, Husk at den må endres slik at den er ulik for hvert bilde.

Endret 12. april 2012 av Bolson

D02 · 12. april 2012

Takk for hjelpen folkens. Setter stor pris på det : )

D02 · 13. april 2012

Enda et spørsmål hvis dere ikke er lei:P

Hvordan kan jeg plasere noe i forhold til center. Hvis jeg plaserer et bilde i center, men vil ha den 100px fra den. Er det mulig uten masse kompliserte veier rundt?

Hjelp med html og css. 3 koloner ved siden av hverandre

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

Hvem er aktive 0 medlemmer