Gå til innhold

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

D02

Av D02
i Programmering og webutvikling

Anbefalte innlegg

agm

agm

Skrevet
Skrevet

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;
}

Videoannonse

Videoannonse
Annonse
D02

D02

Skrevet
  • Forfatter
Skrevet

Prøver å forklare det på nytt : )

 

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

1147024.jpeg

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

D02

D02

Skrevet
  • Forfatter
Skrevet

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 :D Har ikke støtt på problemer enda :p

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

NicholasWalkerHD

NicholasWalkerHD

Skrevet
Skrevet

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

D02

Skrevet
  • Forfatter
Skrevet (endret)

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 av D02
D02

D02

Skrevet
  • Forfatter
Skrevet

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.

agm

agm

Skrevet
Skrevet (endret)

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 av agm
D02

D02

Skrevet
  • Forfatter
Skrevet

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

sunsunsun

Skrevet
Skrevet (endret)

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 av elos
agm

agm

Skrevet
Skrevet

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

Bolson

Skrevet
Skrevet (endret)

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 av Bolson
D02

D02

Skrevet
  • Forfatter
Skrevet

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?

 

:)

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