Archief - CSS: Positioning probleem

^MystiQ · 11 mrt 2007

Achter mijn eerste mislukking ( www.team-ikr.be ) heb ik een poging gedaan om iets nieuws te maken. www.team-ikr.be/test.html en velen vinden het alvast een verbetering maar ik krijg die bug er maar niet uit voor dat middenkader gepositioneerd te krijgen.

Kheb er mij eigenlijk al letterlijk suf achter gezocht want alsek het goe zet in FF is het in IE gebugged en alsek het goe zet voor IE ist gebugged in FF.

Ik weet dak nogal veel gebruik maak van classes en veel divs. Maar kben nog gene pro ( in de verste verte niet ) ma kzou nu wel wa hulp kunnen gebruiken.

Dus anyone who knows the solution ?

SMa · 11 mrt 2007

kun je eens tekenen wat je precies verwacht?

nog een kleine opmerking

als een bepaalde opmaak maar over 1 gedeelte van je site voorkomt moet je een id gebruiken ipv class
als een opmaak meer dan 1 keer, gespreid over de site, voorkomt gebruik je een class

:edit:
ja man

Code:

<div class="navigation"> MAIN&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
NEWS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
ARTICLES&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
TEAM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
MATCHES&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LINKS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
FORUM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
CONTACT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>

Kun je beter als volgt oplossen:

Code:

<ul id="nav">
	<il><a href"#">MAIN</a></il>
	<il><a href"#">NEWS</a></il>
	<il><a href"#">ARTICLES</a></il>
	<il><a href"#">TEAM</a></il>
	<il><a href"#">MATCHES</a></il>
	<il><a href"#">LINKS</a></il>
	<il><a href"#">FORUM</a></il>
	<il><a href"#">CONTACT</a></il>
</ul>

en dan in css kun je het volgende doen:
#nav li { display: inline; list-style-type: none; }
#nav a { display: inline; float: left; width: ---px; text-decoration: none; text-decoration: none; text-align: center; }
+ dan nog de volledige container positioneren

orez · 11 mrt 2007

Code:

<div class="rechts">
      <div class="played">
        <div class="balk">&raquo;&raquo; Recently Played</div>
      </div>
      <div class="message">
        <div class="balk">&raquo;&raquo; Short Message</div>
      </div>

wtf man...
Begin gewoon heel je site opnieuw te coderen...
Nog nooit gehoord van andere tags buiten <div> ???? :/

^MystiQ · 11 mrt 2007

orez zei:
wtf man...
Begin gewoon heel je site opnieuw te coderen...
Nog nooit gehoord van andere tags buiten <div> ???? :/

Koop uzelf een bril en leer lezen "Maar kben nog gene pro ( in de verste verte niet ) ma kzou nu wel wa hulp kunnen gebruiken."

Zero Grav · 11 mrt 2007

Ik zie eigenlijk niet in wat er zo mislukt is aan die eerste site. Als dat één van uw eerste sites is valt die best goed mee. Het is zeker geen hoogstandje maar het is simpel en effectief. Ge zoudt uw nieuwe ontwerp wel tegoei kunnen krijgen mits genoeg knoeiwerk maar het zou dom zijn aangezien ge er totaal niets mee opsteekt, ze is namelijk volledig verkeerd opgebouwd.

Uw site in een notendop:
- Eén div met je header als achtergrond op no-repeat. (en een onzichtbare h1 met je sitetitel om zichtbaar te zijn voor google etc)
- Onder die div een ul met je menu in. (Zie mijn laatst gemaakte posts, in één van de 5 laatste staat een url met meer uitleg daarover (bij site-check))
- Een div met daarin 3 divs die alledrie left floaten (left-center-right content). Op de linkse en rechtse geen achtergrondkleur, op uw middelbar wel.

LINKERBAR
----------
News is één div met een h2 vanboven met een rode achtergrond die over heel de breedte van die div loopt. Div zelf heet witte bg. Hetzelfde met Articles en sponsors. Dit zult ge wellicht nog niet kunnen. Moet ge even voor oefenen, nadenken. (Waarom een h2? Omdat dat ervoor dient en google / mensen zonder stylesheets zo direct weten waar ze aan toe zijn)

CENTERBAR
-----------
- Elk nieuwsbericht is een afzonderlijke div
- h3 voor uw nieuwstitels - float die left en gebruik een span die ge rechts float met uw posted by
- Dan een p met een margin-top en border-top.

RIGHTBAR
----------

- exact hetzelfde als uw linkerbar eigenlijk

Rond het geheel gooit ge een containerke van zoveel pixels en doet ge:
margin-left: 50%;
position: absolute;
left: -dehelftvanuwwidthpx;
width: *px;
top: 20px;

_____________________________________________________

Mensen zijn vrij om dit aan te vullen. Op zich kan het zijn dat het nog beter is een div rond het menu te plaatsen, daar laat ik u vrij in. Heb dit ook maar allemaal vlug vlug gezet, dus kan zijn dat er fouten inzitten.

Waarom ik altijd opteer om alle divs die langs elkaar staan left te floaten? Anders kunt ge al eens problemen met uw margins krijgen. Als ge enkel de meest linkse links laat floaten en de andere er zonder iets langsgooit + een margin-left op de rechtse div gebeurt er soms niets.

Ha, beat that. Als ge mijn rekeningnummer wilt hebben, pm.

SMa · 11 mrt 2007

@hierboven
positon absolute? ...
why... ?
kun je evengoed floaten, en zal dan op iedere schermgrootte mooi overkomen

linkerbar in een div => float je naar links
centerbar in een div => float je naar links
rightbar in een div => float je naar links
allemaal een width meegeven & absolute positioning is volledig overbodig

omfg · 11 mrt 2007

SMa zei:
@hierboven
positon absolute? ...
why...
kun je evengoed floaten, en zal dan op iedere schermgrootte mooi overomen

linkerbar in een div => float je naar links
centerbar in een div => float je naar links
rightbar in een div => float je naar links
allemaal een width meegeven & absolute positioning is volledig overbodig

het gebruik van absolute positioning is (in dit geval) gewoon een truukje om de site in de meeste browsers te centreren, het staat in de webmaster gids thread bij code snippets

Zero Grav · 11 mrt 2007

Lees eens opnieuw schat.

^MystiQ · 11 mrt 2007

Zero grav, dank u voor de nuttige reply, het komt er eigenlijk op neer dat ik best nog eens mijn ontwerp opnieuw maak en daarbij het aantal classes en divs verminder ?

Zero Grav · 11 mrt 2007

Nja, het aantal divs zeker verminderen. Dit doe je automatisch als je tags gaat gebruiken waarvoor ze gemaakt zijn.
divs => containertjes
h's => titels
p => paragrafen
a => links
img => afbeeldingen
...

Jij gebruikt nu voor een paragraaf ook een div enzo, compleet fout.

Classes tegenover divs. Als ge een element één keer gebruikt (zoals een container ) dan geeft ge die een id mee. Als ge een bepaalde opmaak hebt voor een bepaald element (zoals al uw h2's die er hetzelfde uitzien) geeft ge die een class.

^MystiQ · 11 mrt 2007

En hoe moet ik dan precies die rode balkjes in mijn containerkes doen ? Moet ik daar iedere keer images voor maken ofzo dan ?

Want nu maakte ik iedere keer een div aan en gaf die een achtergrondkleurke. Da was trouwens heel gemakkelijk vondek

dJeez · 11 mrt 2007

Math'ke zei:
Zero grav, dank u voor de nuttige reply, het komt er eigenlijk op neer dat ik best nog eens mijn ontwerp opnieuw maak en daarbij het aantal classes en divs verminder ?

Je kan ook het divitis artikeltje eens doornemen voor wat hints.

Wat uw rode balkjes betreft : het is een titel, dus lijkt een header tag (vb. <h3>) mij wel aangewezen.

Zero Grav · 11 mrt 2007

Ge moet natuurlijk ook wel lezen wat ik zeg. Het is zoals Djeez het beschreef een h3 met een background-color (waarom een image gebruiken als er kleuren voorhanden zijn?)

orez · 11 mrt 2007

Math'ke zei:
Koop uzelf een bril en leer lezen "Maar kben nog gene pro ( in de verste verte niet ) ma kzou nu wel wa hulp kunnen gebruiken."

hou u gerust wat in met dergelijke uitspraken zoals "koop uzelf een bril", want dat gaat veel meer op voor jou als voor mij.

Reden --> WEBMASTER STICKY (www.w3schools.com anybody??) waar heel goed uitgelegd staat (op w3schools) waarvoor welke tags dienen enzo...

Heel mooi dat Zero Grav hier dergelijk beknopt lijstje meegeeft, maar er worden hier zoveel mensen op gewezen om naar w3schools te gaan, waarom begin jij er dan ook eens niet mee? Een mooiere samenvatting en mooiere lijsten als daar vind je nu eenmaal niet.

SMa · 12 mrt 2007

omfg zei:
het gebruik van absolute positioning is (in dit geval) gewoon een truukje om de site in de meeste browsers te centreren, het staat in de webmaster gids thread bij code snippets

dat maakt het nog niet nuttig

als iemand het nu nodig zou vinden om zijn browservenster te versmallen zal die rightbar over heel je site schuiven, als dit met floaten zou gecodeert zijn zou alles mooi onder elkaar gaan staan

Zero Grav · 12 mrt 2007

SMa zei:
dat maakt het nog niet nuttig

als iemand het nu nodig zou vinden om zijn browservenster te versmallen zal die rightbar over heel je site schuiven, als dit met floaten zou gecodeert zijn zou alles mooi onder elkaar gaan staan

Denk dat ge het toch nog steeds niet heel goed begrijpt. Kijk bijvoorbeeld eens op http://www.vandeborne.be/Fre/_Huisartsenvereniging/Private/main.html daar heb ik die techniek ook toegepast en die site blijft evenzeer perfect gecentreerd bij het veranderen van de browsergrootte.

^MystiQ · 17 mrt 2007

Ok, ik ben eens opnieuw begonnen :

www.team-ikr.be/test.html

Is dit al een verbetering of is het nog niet goed ? Kheb allezins mijn positioning problem niet meer ..

^MystiQ · 17 mrt 2007

Ok, hier is mijn nieuw 'ontwerp'

www.team-ikr.be

Nu hebbek maar 1 probleem, bij mij en anderen oogt deze site perfect maar bij anderen is de rechtse kader verschoven omdat de site zich niet aanpast aan andere browergroottes, heeft iemand ergens daar een site waar er uitleg staat hoe je dit kan verwezenlijken ?

Archief - CSS: Positioning probleem

^MystiQ

Legacy Member

SMa

Legacy Member

orez

Legacy Member

^MystiQ

Legacy Member

Zero Grav

Legacy Member

SMa

Legacy Member

omfg

Legacy Member

Zero Grav

Legacy Member

^MystiQ

Legacy Member

Zero Grav

Legacy Member

^MystiQ

Legacy Member

dJeez

Legacy Member

Zero Grav

Legacy Member

orez

Legacy Member

SMa

Legacy Member

Zero Grav

Legacy Member

^MystiQ

Legacy Member

^MystiQ

Legacy Member