Gå til innhold

Trenger hjelp med enkel plassering av to bilder.

Ajaco

Av Ajaco
i Programmering og webutvikling

Anbefalte innlegg

Ajaco

Ajaco

Skrevet
Skrevet (endret)

Heisann, jeg er ganske ny med webdesign, og jeg har fortsatt mye å lære. Men jeg har tuklet litt med en forside til en kommende netside for ungdomsbedriften min.

 

post-93392-1259543890_thumb.jpg

 

Slik ser det ut så langt som jeg har kommet. Det jeg ønsker er å få "privat" og "bedrift" til å komme opp på linje med den grønne dotten, for deretter å plasseres like langt unna denne dotten på hver side (f.eks 100px). Dette sliter jeg altså med. Jeg sliter også med å få "privat" og "bedrift" til å bevege seg i forhold til den grønne dotten, istedet for den store logoen. Som du ser nå, så ligger knappene kant i kant med logoen.

 

Om jeg nå endrer på margin right/left på privat eller bedrift, beveger de seg altså i forhold til rammene på logoen, ikke i forhold til dotten. Jeg har prøvd å putte "privat" og "bedrift" inn i dotten sin div tag, men det funket fremdeles dårlig.

 

Om jeg har vært utydelig til nå: Det jeg ønsker er at "privat" og "bedrift" beveger seg i forhold til dotten i midten, ikke i forhold til logoen. Så hvis jeg på "bedrift" skriver "margin-left: 30px;" så vil "bedrift" flytte seg 30px til venstre for dotten, ikke 30px til venstre for kanten på logoen

 

Her er HTML og CSS kodene mine, da jeg regner med disse kan være nyttige.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teknet</title>
<link href="frontpage.css" rel="stylesheet" type="text/css" />
</head>
<div id="holderall">
  <div id="logobilde"><img src="img/teknet_logo_startside.png" width="604" height="292" />
	<div id="dott"></div>
  		<div id="privat"><img src="img/privat_sort.png" width="155" height="43" /></div>
	<div id="bedrift"><img src="img/bedrift_sort.png" width="155" height="43" /></div>
</div>
</div>

</body>
</html>

@charset "utf-8";
/* CSS Document */

#holderall{
padding-top:40px
}

#logobilde{
width: 604px;
height: 292px;
margin-left:auto;
margin-right:auto;
overflow:visible;
}

#bedrift{
float:right;
width:155px;
height:43px;
overflow:visible;
}

#privat{
float:left;
width: 155px;
height:43px;
overflow:visible;
}

#dott{
margin-left:auto;
margin-right:auto;
width: 25px;
height:25px;
margin-top:9px;
overflow:visible;
background-image:url(img/dott.png)
}

 

Håper noen skjønte spørsmålet mitt, og er i stand til å se feilen, eller i stand til å kunne hjelpe meg :)

Endret av Ajaco
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Azidops

Azidops

Skrevet
Skrevet

Du har tre bilder:

- Privat

- Bedrift

- Dott

 

Det enkleste er å sette samme høyde på alle 3 bildene slikt at det er samme utgangspunkt. For å få privat og bedrift til å bevege seg sammen med dotten er det kanskje enklest å sette de to inni diven til dotten (hehe... dott. Knis...).

 

Et annet tips er å sette ramme rundt divene du bruker slik at du ser hvor store de faktisk er. Da slipper du å lure deg selv med den hvite bakgrunnen.

Lenke til kommentar
Ajaco

Ajaco

Skrevet
  • Forfatter
Skrevet (endret)
Du har tre bilder:

- Privat

- Bedrift

- Dott

 

Det enkleste er å sette samme høyde på alle 3 bildene slikt at det er samme utgangspunkt. For å få privat og bedrift til å bevege seg sammen med dotten er det kanskje enklest å sette de to inni diven til dotten (hehe... dott. Knis...).

 

Et annet tips er å sette ramme rundt divene du bruker slik at du ser hvor store de faktisk er. Da slipper du å lure deg selv med den hvite bakgrunnen.

Jeg prøvde å putte privat og bedrift inni div-taggen til dotten, men det hjalp fint lite. De ligger fortsatt ikke på samme linje, og oppfører seg ikke likt. Det irriterer noe grenseløst.

 

(bruker også å legge på ramme på bildene når jeg jobber, er veldig mye greiere da :))

 

Om noen har noen konkrete løsninger, ville jeg blitt glad.

Endret av Ajaco
Lenke til kommentar
Azidops

Azidops

Skrevet
Skrevet
Jeg prøvde å putte privat og bedrift inni div-taggen til dotten, men det hjalp fint lite. De ligger fortsatt ikke på samme linje, og oppfører seg ikke likt. Det irriterer noe grenseløst.

Det er, som sagt, fordi bildene av privat og bedrift er større enn dott-bildet. De bruker mer plass. Orker ikke kode noe nå, men å gjøre alle bildene like høy vil hjelpe deg stort.

Lenke til kommentar
Wattengård

Wattengård

Skrevet
Skrevet 

<div id="container">
<div id="privat"></div>
<div id="dott"></div>
<div id="bedrift"></div>
</div>

#container { position: relative; width: 300px; }
#privat	{ position: absolute; width: 100%; top: 0px; left: 0px; background: url('priv.png') top left no-repeat; }
#dott	  { position: absolute; width: 100%; top: 0px; left: 0px; background: url('dott.png') top center no-repeat; }
#bedrift   { position: absolute; width: 100%; top: 0px; left: 0px; background: url('bedr.png') top right no-repeat; }

 

Dette er ikke testet...

 

-C-

Lenke til kommentar
Ajaco

Ajaco

Skrevet
  • Forfatter
Skrevet (endret)

Takk for svar ChristianW, det hjalp meg litt. Men ikke like mye som jeg håpet nå. Jeg gjorde det litt annerledes nå, siden bildene jeg skal ha skal være roll-over images, og linker, så hendviser jeg til bildene i HTML'en, ikke CSS'en.

 

Problemet ligger ikke i at jeg sliter å posisjonere bildene i bredden, men i høyden. Det virker som om det ikke går ann å ha fler bilder på én linje. De plaseres riktig i bredden, men ikke på samme linje. Så nå er spørsmålet altså: Hvordan skal jeg få disse på samme linje?

 

 

Slik HTML'en min ser ut atm er slik:

</head><body onload="MM_preloadImages('img/privat_grønn.png','img/bedrift_grønn.png')">
<div id="holderall">
<div id="logobilde"><img src="img/teknet_logo_startside.png" width="604" height="292" /></div>
<div id="container">

<div id="privat"><a href="Index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','img/privat_grønn.png',1)"><img src="img/privat_sort.png" name="Image2" width="155" height="43" border="0" id="Image2" /></a></div>

<div id="dott"><img src="img/dott.png" width="25" height="43" /></div>

<div id="bedrift"><a href="Index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','img/bedrift_grønn.png',1)"><img src="img/bedrift_sort.png" name="Image4" width="155" height="43" border="0" id="Image4" /></a></div>

</div>
</div>

</body>
</html>

 

Slik CSS'en min ser ut atm, er slik:

#holderall{
padding-top:40px;
margin-left: auto;
margin-right:auto;
width:604px;

}

#logobilde{
width: 604px;
height: 292px;
overflow:visible;
}

#container { position: relative;}
#privat	{ width: 155px; margin-left: 31px;}
#dott	  { width: 25px; margin-left:auto; margin-right:auto; }
#bedrift   { width: 155px; float:right; margin-right: 7px }

 

Slik siden ser ut atm, så dere kanskje forstår mer hva jeg snakker om:

http://bildr.no/view/537192

 

(PS. Hvordan kan jeg midtstille en side i høyden? Jeg prøvde

margin-top: auto; margin-bottom:auto; i holderallen min.

Men det funket dårlig.)

Endret av Ajaco
Lenke til kommentar
Azidops

Azidops

Skrevet
Skrevet

Prøv med (utestet):

#privat	{ width: 155px; margin-left: 31px; float: left; clear: left;}
#dott	  { width: 25px; float: left; }
#bedrift   { width: 155px; margin-right: 7px; float: right: clear: right; }

 

Til ditt andre spørsmål legger jeg ved en link. Desverre er det litt vanskeligere enn horisontal sentrering. Har ikke testet dette selv.

http://www.jakpsatweb.cz/css/css-vertical-...r-solution.html

 

<img class="inline" src="blabla" />

 

.inline { display: inline; }

 

Igjen... Ikke testet...

Vil bare legge til at da må bildene ut av sine respektive diver for at dette skal fungere.

Lenke til kommentar
Wedvich

Wedvich

Skrevet
Skrevet

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="frontpage.css" rel="stylesheet" type="text/css" />
<title>Teknet</title>
</head>
<body>
<div id="header">
<div id="logobilde"></div>
<ul>
	<li id="privat"></li>
	<li id="dott"></li>
	<li id="bedrift"></li>
</ul>
</div>
</body>
</html>

CSS

@charset "utf-8";

* {
border: 0;
list-style: none;
margin: 0;
padding: 0;
}

#header {
margin-top: 40px;
}

#logobilde {
background: url("img/teknet_logo_startside.png") no-repeat top center;
height: 292px;
margin-left: auto;
margin-right: auto;
overflow: visible;	
width: 604px;
}

#header ul {
margin-left: auto;
margin-right: auto;
position: relative;
}

#header ul li {
float: left;
}

#privat {
background: url("img/privat_sort.png") no-repeat top center;
height: 43px;
margin-right: 80px;
position: absolute;
right: 50%;
width: 155px;
}

#dott {
left: 50%;
margin-left: -12.5px;
position: absolute;
width: 25px;
}

#bedrift {
background: url("img/bedrift_sort.png") no-repeat top center;
height: 43px;
left: 50%;
margin-left: 80px;
position: absolute;
width: 155px;
}

 

Finnes sikkert mer elegante løsninger, men denne er i det minste enkel og effektiv. Bare husk å legge til 12.5 piksler for å få den faktiske marginen (siden dotten er 25 piksler bred). Atså, om du vil ha bedrift 30 piksler fra kanten på dotten, setter du margin-left til 42.5 piksler.

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
×
×
  • Opprett ny...