css- hente verdi fra ekstern js fil

Åsmund · 20. mars 2009

Hei.

Jeg skal for andre gang scripte en side selv, så kunnskapene er ikke så høye ennå.

Denne gangen vil jeg bruke css isteden for tabeller.

Jeg har nå en banner jeg har fått sentrert uansett størrelsen på vinduet.

Deretter skal jeg nå plassere nyheter som starter fra baneren på venstre side, som de fleste andre websider.

Jeg bruker da en ekstern js fil som kalkulerer bredda på vinduet og deler det på 2. Deretter trekker jeg fra med halvparten av størrelsen på banneren...eller noe slikt, ikke helt ferdig med kalkuleringen.

Men deretter skal css hente inn denne verdien fra js fila.

Hvordan gjør jeg det?

Takker for svar

Themecreator · 20. mars 2009

Den måten din virket veldig tungvindt!

Hvis det eneste du skal gjøre er å midtstille inholdet uansett skjermstørrelse, så er det lettere å bare gjøre det via CSS... (hadde det samme problemet men fikk hjelp)

skriv dette i cssfilen/style taggen sammen med det andre greiene slik som background-image osv.osv.

position: absolute;

top:220px;

left: 50%;

margin-left: -210px;

top: her bare plasserer du den slik som du føler for.

margin-left: Hvis du skal ha et element midtstilt, så kan du skrive: -(halvparten av bredden av elementet) Husk -. Hvis du ikke trenger det helt midstilt kan du bare endre på margin-left: verdien slik som det passer deg.

Kan hende at jeg misforsto deg litt. forsto ikke helt spørsmålet ditt, men tror kanskje dette kan være svaret x)

Åsmund · 20. mars 2009

Hei.

Dette virker jo enklere, skal teste det ut.

Skal bare ha det midtstilt ja, det gjorde jeg i css slik:

{

display: block;

margin-left: auto;

margin-right: auto;

}

Men deretter skal nyhetene som skal være under, ikke være midtstilt, men på starte på linje med banneren.

Om jeg kan gjøre dette kun ved å endre pixlene som over er det jo det enklere enn jeg trodde.

emilkje · 20. mars 2009

Når jeg skal sentrere et innhold pleier jeg alltid å bruke følgende metode, siden denne er cross-browser kompatibel og fungerer uansett om brukeren har javascript aktivert eller ikke:

<!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>Untitled Document</title>
<style type="text/css">

div#wrapper {
width:800px;
margin: 50px auto;
}

</style>
</head>

<body>
<div id="wrapper">
	<p>Dette er teksten</p>
</div>
</body>
</html>

Og som du ser i spolieren over er css verdiene til innholdet som skal sentreres (i dette tilfellet #wrapper) slik:

div#wrapper {

width:800px;

margin: 50px auto;

}

Korriger meg om dette er feil

EDIT: Du var litt kjappere enn meg der åsmund, og det ser ut til at du er på rett spor =) det eneste som er forskjell mellom våres metoder er at jeg har nøstet verdiene.

Endret 20. mars 2009 av eMilt

Åsmund · 20. mars 2009

Takker for svar ser ut til at dette funka fint faktisk. Var sikker på at elementet ikke holdt seg der det skulle, men det gjorde det gitt

Themecreator · 20. mars 2009

Har et problem jeg også, hvis noen kunne hjelpe meg med det... (har laget en egen tråd for det, men har ikke fått noe respons) For nettsiden min blir helt annerledes i Explorer enn i firefox... Ingenting kommer på rett plass osv.

Har det noe med at Explorer leser html på en annen måte enn Firefox?

I så fall, har noen en løsning? Emilt nevnte dette med cross browser. Er dette et hint? Hva innebærer dette med cross browser?

Åsmund · 20. mars 2009

Jeg skal lage ett nyhetssystem. Så da må jeg prøver å lage flere paragrafer med samme id.

Første id har pososjon absolute, men den neste må være relativ for at den skal automatisk plassere seg nedenfor. Tok litt tid men jeg oppdaget det da blei en horisontal scroll. Left-margin % øker bredden på hele siden, men uten den så får jeg ikke teksten til å holde sin horisontale posisjon.

Har google dette, som alltid, men har ikke klart å løse problemet.

Finnes det kanskje en bedre måte å posisjonere nyhetene?

De skal være php gennererte.

index fila:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<head>
<title>nAstronomy</title>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>

<body id="c" background="bottom.jpg">

<img id="b" src="banner.jpg">
<p id="p">dette er en test</p>
<p id="pb">dette er en testSCD</p>
</body>
</html>

css fila:

#p
{
position: absolute;
top:240px;
left:50%;
margin-left: -515px;
{color: rgb(0,0,255)}
}

#pb

{
position: relative;
left:50%;
margin-left: 220px;
{color: rgb(0,0,255)}
}

emilkje · 26. mars 2009

Skjønte ikke helt problemstillingen. Hvorfor bruke position:absolut? Hvis du skal midtstille alt innholdet, så er det myyye enklere om du lager en midtstilt div som du putter inn alt innholdet:

<body>
<div id="wrapper">

<div id="banner"><img src="banner.jpg" width="800" height="150" /></div>

<div id="meny">
	<ul>
		<li>Første element</li>
		<li>Andre element</li>
		<li>Tredje element</li>
	</ul>
</div>

<div id="innhold">
	<h1>Overksrift</h1>
	<p>Dette er artikkelen... Dette er artikkelen... Dette er artikkelen... Dette er artikkelen...Dette er artikkelen...</p>

	<h1>Overksrift 2</h1>
	<p>Her er enda en artikkel Dette er artikkelen... Dette er artikkelen...</p>
</div>

<div style="clear:both"></div>

<div id="footer"><p>Dette er bunnteksten</p></div>
</div>
</body>

Der div#wrapper inneholder alle elementene som du ser ovenfor.

slik kan css se ut med dette html oppsettet (veldig enkelt):

html, body {margin:0; padding:0; background-color:#f0f0f0}

#wrapper {
width:800px;
background-color:#fff;
margin:50px auto;
}

#meny {
float:left;
width:230px;
padding:10px;
}

#innhold {
float:right;
width:530px;
padding:10px;
}

#footer {
background-color:#ccc;
height:50px;
text-align:center;
}

Dette er bare et lite eksempel på hvordan du kan sette opp en enkel layout med midtstilt innhold...

Lite tips: ikke brukt id på elementer som gjentar seg nedover siden. Da vil ikke nettsiden valideres. Bruk class på de elementene som skal brukes flere ganger.

Åsmund · 28. mars 2009

Takk skal du ha

Jeg har mye grunnlegende å lære skjønner jeg.

Alt ser ut til å bli plassert riktig nå.

edit:

Dog har jeg problemer med å legge til ett bilde helt i bunn midtstilt.

Bunn blir som bunnen av #wrapper ser det ut til,, men det hjelper ikke om jeg legger bildet utenfor #wrapper.

Nå har jeg ikke rekt å prøve så mye enda dog.

Fin hjemmeside du har foresten.

Endret 28. mars 2009 av Åsmund

emilkje · 28. mars 2009

Takk skal du ha =)

Den enkleste måten å lære ting på er rett og slett å prøve seg fram og lese masse på det emnet man sliter med. Jeg har aldri kjøpt en eneste bok, da det finnes masse gratis ressurser på internet.

Skal du bruke bilde som footer eller er det noe annet du tenkte på? Isåfall så kan du endre css til:

#footer {
background:transparent url(images/footer.jpg) top left no-repeat;
height:50px;
text-align:center;
}

der images/footer.jpg er bildet du vil bruke.

Bare å si ifra hvis det er noe du ikke får til.. skal prøve å hjelpe deg så godt jeg kan!

Ha en fin helg

EDIT: skriveleif

Endret 28. mars 2009 av eMilt

4588pkdkrikue5c · 10. april 2009

Hei!

Når det gjeld å midstille innhaldet på ei side treng du berre å angi ei bredde på diven du har innhaldet i, og derretter sette margin:0 auto.

Altså:

#namnpådiv {
width:800px;
margin:0 auto;
}

Når det gjeld footer kan du sjå litt her

Lukke til!

Thomas. · 11. april 2009

Når det gjeld å midstille innhaldet på ei side treng du berre å angi ei bredde på diven du har innhaldet i, og derretter sette margin:0 auto.

Det kan gjøres enda enkelere.

Sette alle margin og padding på alle html-elementer til 0. (body, p, a, li, ul osv.. alle.)

* {
margin:0;
padding:0;
}

også:

div.element {
margin: auto;
}

Blir sa midtstilt.

Endret 11. april 2009 av php_user

Åsmund · 12. april 2009

hei, takk, jeg har fått det til nå

det gikk ett lys opp for meg, plutselig blei alt veldig greit.

Nå sliter jeg litt med php update, men vil ikke spørre om hjelp til det ennå.

Logg inn

css- hente verdi fra ekstern js fil

Anbefalte innlegg

Åsmund

Lenke til kommentar

Videoannonse

Themecreator

Lenke til kommentar

Åsmund

Lenke til kommentar

emilkje

Lenke til kommentar

Åsmund

Lenke til kommentar

Themecreator

Lenke til kommentar

Åsmund

Lenke til kommentar

emilkje

Lenke til kommentar

Åsmund

Lenke til kommentar

emilkje

Lenke til kommentar

4588pkdkrikue5c

Lenke til kommentar

Thomas.

Lenke til kommentar

Åsmund

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer