Door
Roy
op 02-08-2005 09:33
gewijzigd op 02-08-2005 09:34
1.345 views
Hallo dan, hier ben ik weer eens.
Ik heb de website www.racenieuws.net/2.0 . Als je daar naartoe gaat zie je twee nieuwsberichten... maar nu had ik een vraagje:
Hoe kan ik het voor elkaar krijgen dat ik op elke beeldschermresolutie het juiste beeld krijg?
Ik had het eerst via px ingesteld en daarna in %, maar ook dat helpt niet echt. Alles staat in elke beeldschermresolutie anders. Als je m'n css bestand wilt zien, ga dan even naar www.racenieuws.net/2.0/style.css
PS: Even voor de duidelijkheid van het css bestand... headline is het linker nieuwsbericht en headline 2 de rechter.
Ik begrijp je vraag niet helemaal; wil je de grootte van de letters aanpassen aan de resolutie of wil je de contentsectie #site beeldvullend maken?
Overigens zou ik ik headline2 niet absolute positioneren.
#headline2{
width: 285px;
border-bottom: 1px solid #000;
margin-top: -285px;
position: absolute; right: 31%
}
Relative lijkt me beter (tov van div #site, afstand tot linkerkantlijn van #site in pixels bv 300px).
position: relative;
left: 300px;
top:0;
Nog mooier is natuurlijk om de blocks te floaten binnen #site; headline1 float je naar links headline2 naar rechts.
Nou wat ik bedoel... is dat ik met elke resolutie (800x600, 1024,768 enz.) de website juist in beeld krijg. Als ik nu op een andere resolutie ga kijken dan zit headline 2 op een hele andere positie...
Top... dit werkt iig... nu is het op elk formaat beeldscherm goed te zien!
Het enige rare wat ik nu heb, is dat ik de breedte van Headline (de linkse dus) wel kan veranderen, maar de border blijft staan in IE. In Firefox veranderd die wel mee qua breedte.
Ook heb ik nog iets:
min-height: 500px werkt bij mij niet met IE, wel met Firefox. Wat moet ik neerzetten zodat het ook werkt in IE?
?
Onbekende gebruiker
02-08-2005 12:46
Hang de border in headline2 wellicht dat dat helpt
#headline2{
width: 285px;
border-left:1px solid #000;
position: relative;
left: 290px;
top:0;
}
headline1 zit wel erg dicht tegen de kantlijn van #site. Verder zou ik de teksten wat luchtiger maken
door een grotere line-height, word-spacing en padding (misschien ander font en andere kleur? Maakt het net wat anders dan anders).
Als je dat wilt maak dan een aparte class aan in css bv
.textstyle {
line-height:1.4;
word-spacing:1.2;
padding:0 5px;
color:#000;
}
hernoem vervolgens je id="headline1" naar class="headline1"
een voeg de textstyle toe:
je krijgt dan:
class="headline1 textstyle"
Hetzelfde doe je dan voor id="headline2"
class="headline2 textstyle"
Het voordeel is dan dat je alle tekst opmaak specifiek voor de headlines in één class hebt zitten.
Het hernoemen van id naar class is omdat een id uniek is en een class niet (mag meerdere keren voorkomen)
min-height werkt alleen in firefox, dat had je goed gezien. Je kunt het wel oplossen door naast headline2 een div te hangen van 1px breed en de gewenste pixels als hoogte.
?
Onbekende gebruiker
02-08-2005 13:03
Let er ook even op dit je geen doctypes, css en head-tags achterlaat in de body.
Haal even je headline1 en headline2 leeg een plaats er even puur tekst. Als er bugs optreden in de layout weet je i.i.g. dat het niet daaraan ligt.
Ik gebruik gewoon "hokjes" die ik in css heb gemaakt. Die "hokjes" heten Headline en Headline2. Als ik gewoon in mn source kijk, zie je één body staan. Zo te zien als je via de source op internet kijkt, maakt hij van de <div> tags een body tag.
Sorrie hoor, maar dat is natuurlijk onzin.
Jij hebt gewoon ergens in je PHP broncode, of in je templates voor mijn part een foutje zitten, waardoor per blokje <body> ook meegenomen wordt.
Je code verandert niet zomaar.
