[HTML/css]Float + venster resizen - Softwareontwikkeling

donderdag 9 februari 2006 23:50

Acties:

Topicstarter

Ben bezig aan een website en wilde toch eens afstappen van het onterende gebruik van de <table>'s. Zo gezegd, zo gedaan, maar ik loop, zoals de meeste, tegen genoeg problemen op. De meeste zijn op te lossen met een zoekopdracht of twee, maar dit kan ik nergens vinden.

De site bestaat uit een menu aan de linkerkant van het scherm, hiernaast moet het hoofdgedeelte komen met de informatie van de site. Boven dit gedeelte wil ik verschillende knoppen plaatsen.

Ik heb dit als volgt geprobeerd:

code:

<body>
<h6 id="site_header">&nbsp;</h6>
<div id="side_div">
        <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        </ul>
        <div id="info">Beweeg over een poster om de titel te zien.</div>
        <div class="poster_links" onMouseOver="show_title('Fun with Dick and James')" onmouseout="restore_info()">[img]"img/1.jpg"[/img]</div>
        <div class="poster_rechts" onMouseOver="show_title('Jaws')" onmouseout="restore_info()">[img]"img/2.jpg"[/img]</div>
        <div class="poster_links" onMouseOver="show_title('Alien vs Predator')" onmouseout="restore_info()">[img]"img/3.jpg"[/img]</div>
        <div class="poster_rechts" onMouseOver="show_title('Star Wars Epidsode III: Revenge of the Sith')" onmouseout="restore_info()">[img]"img/4.jpg"[/img]</div>
</div>


<div id="tabbladen">
    <li><a href="">item</a></li>
    <li><a href="">item</a></li>
    <li><a href="">item</a></li>
    <li><a href="">item</a></li>
</div>
    
<div id="main">Albert is kicke</div>

</body>

Ongetwijfeld teveel gebruik van div's, en als jullie daar nog nuttige tips over hebben: gaarna, maar waar het om gaat zijn de 'main' div en de 'tabbladen'. Hier de css:

code:

/* CSS Document */
body {
    background-color: #E8F9FF;
    margin: 0px;
    background-image: url(../images/background_main.gif);
    background-repeat: repeat-x;
    background-position: 0px 100px;
}

/*header*/
#site_header {
    border-bottom: #000000 1px solid;
    height: 100px;
    background-color: #FFFFFF;
    background-image: url(../images/header.jpg);
    background-repeat: no-repeat;
    margin-bottom: 1px;
    margin-top: 0px;
}

/*menu..? & Posters*/
#side_div {
    border: 1px dashed #70889f;
    background-color: #EEF3FB;
    margin: 5px; 
    width: 200px;
    height: 350px;
    color: #000066;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding-top: 5px;
    padding-left: 0px;
    padding-right: 0px;
    float: left;
}

/*tabbladen*/
#tabbladen {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 650px;
    float: left;
}

#tabbladen li {
    margin-left: 3px;
    padding: 0px;
    border: 1px dashed #70889f;
    float: right;
    list-style-type: none;
}

#tabbladen li a:hover {
    padding-left: 10px;
    padding-right: 10px;
    display: block;
    background-color: #EEF3FB;
}

#tabbladen li a {
    padding-left: 10px;
    padding-right: 10px;
    display: block;
    background-color: #BECEE6;
}

/*hoofd-venster*/
#main {
    border: 1px dashed #70889f;
    background-color: #EEF3FB;
    margin: 5px; 
    margin-top: 0px;
    width: 650px;
    height: 350px;
    color: #000066;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 2px;
    float: left;
}

Het punt is dat als je het venster van je browser zoveel verkleint dat het menu en de main div niet maar naast elkaar passen, de main div onder het menu gezet worden (als ook de tabbladen). Dit wil ik niet hebben en ik vraag me nu af of dit kan zonder de boel absoluut te positioneren.

Het vast een hele simpele vraag, maar ik probeer om het allemaal een beetje semantisch te doen en netjes te werken en daar heb ik nu even wat hulp bij nodig.

[ Voor 14% gewijzigd door Roa op 10-02-2006 00:01 . Reden: kleinde wijziging in de code ]

Research is what I'm doing when I don't know what I'm doing.

vrijdag 10 februari 2006 00:08

Acties:

Danjel

Dit is op te lossen door er een div id="container" omheen te gooien. Die even breedt maken als dat je inhoud en menu bij elkaar opgeteld zijn (vergeet de margin en padding niet erbij op te tellen indien aanwezig).
Dat zou moeten werken.

[ Voor 39% gewijzigd door Danjel op 10-02-2006 00:11 ]

They who buy the dip, deserves the rip.

vrijdag 10 februari 2006 10:33

Acties:

cyberstalker

Eersteklas beunhaas

Je kunt ook gewoon een min-width op je body zetten. Dan krijg je een scrollbar als het venster te smal wordt, maar rekt het geheel wel mooi mee als je het venster vergroot.

Ik ontken het bestaan van IE.

vrijdag 10 februari 2006 12:35

Acties:

Roa

Topicstarter

Ik dacht dat min-width niet door IE ondersteunt wordt? Nu zie ik in je sig dat je het bestaan van IE ontkent, maar helaas is de realiteit anders

Stom dat ik er niet aan gedacht had een container om zowel de main als de menu div te gooien, dankje voor de schop in de juist richting. Het werkt nu prima

Research is what I'm doing when I don't know what I'm doing.

vrijdag 10 februari 2006 16:41

Acties:

Danjel

Met een container of min-width?

They who buy the dip, deserves the rip.

vrijdag 10 februari 2006 16:50

Acties:

JHS

Splitting the thaum.

Roa schreef op vrijdag 10 februari 2006 @ 12:35:
Ik dacht dat min-width niet door IE ondersteunt wordt? Nu zie ik in je sig dat je het bestaan van IE ontkent, maar helaas is de realiteit anders

IE behandelt width over het algemeen zoals je min-width zou moeten behandelen, dus dat levert geen probleem op

.

Met betrekking tot divjes: Volgens mij lijkt de opsomming van posters ook, precies, een opsomming, dus list.

DM!