Layout probleem - rekbaarheid onder mekaar - Softwareontwikkeling

zondag 13 april 2008 16:06

Acties:

Topicstarter

Hallo,

Ik zit met nogal een vervelend probleem. Ik heb dus de header van men layout rekbaar gemaakt, nou is het probleem wanneer je de browser kleiner maakt dan 915px (ongeveer) dan springt ene deel eronder. Mijn bedoeling is dus als de browser klein is gemaakt dan dat dat ze gewoon moeten scrollen naar links / rechts. Nou ik weet dus niet echt wat ik fout doe...

De code

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
body  {
background: url(http://www.nice2you.net/images/bg2.png);
margin: 0px;
}

#header {
    background: url(http://www.nice2you.net/images/header_n2y.gif) no-repeat;
    height: 116px;
    width: 439px;
    float: left;
}
#header_stretch {
    background: url(http://www.nice2you.net/images/n2y_stretch.gif);
    background-repeat: repeat-x;
    widht: 100%;
    height: 116px;
    margin-left: 15px;
    margin-top: 20px;
    margin-right: 15px;
}
#header_update {
    background: url(http://www.nice2you.net/images/n2y_updates.gif);
    height: 116px;
    width: 474px;
    float: right;
}

-->
</style>

</head>
<body>
<div id="header_stretch"><div id="header"></div><div id="header_update"></div></div>
</body>
</html>

Weet iemand hoe ik dit kan vermeiden ?

zondag 13 april 2008 16:10

Acties:

T-MOB

Je zou het met absolute positionering op kunnen lossen. Dan geef je #header rechts een marge van de breedte van #header_update. #header stretch positioneer je relative en #header_update positioneer je absoluut rechts.

Regeren is vooruitschuiven

zondag 13 april 2008 16:15

Acties:

Lorduh

Topicstarter

Wacht hé. Ik begrijp niet direct wat je bedoelt hoor.

zondag 13 april 2008 16:18

Acties:

blaatkipje

Wat je kan doen is op je #header_strech een min-width meegeven. ( werkt in FF )

zondag 13 april 2008 16:21

Acties:

Lorduh

Topicstarter

Ik heb nu

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
body  {
background: url(http://www.nice2you.net/images/bg2.png);
margin: 0px;
}

#header {
    background: url(http://www.nice2you.net/images/header_n2y.gif) no-repeat;
    height: 116px;
    width: 439px;
    float: left;
}
#header_stretch {
    background: url(http://www.nice2you.net/images/n2y_stretch.gif);
    background-repeat: repeat-x;
    widht: 100%;
    height: 116px;
    margin-left: 15px;
    margin-top: 20px;
    margin-right: 15px;
    position: relative;
}
#header_update {
    background: url(http://www.nice2you.net/images/n2y_updates.gif);
    height: 116px;
    width: 474px;
    float: right;
    position: absolute;
    margin-left: 439px;
}

-->
</style>

</head>
<body>
<div id="header_stretch"><div id="header"></div><div id="header_update"></div></div>
</body>
</html>

Maar als mijn browser dan groot genoeg is krijg ik:

Afbeeldingslocatie: http://img119.imageshack.us/img119/9664/nukw5.th.jpg

Wanneer hij kleiner is werkt hij dan weer wel goed.

[ Voor 14% gewijzigd door Lorduh op 13-04-2008 16:22 ]

zondag 13 april 2008 16:22

Acties:

T-MOB

Nou, je probleem wordt veroorzaakt omdat je twee zaken naast elkaar float. Als daar niet genoeg ruimte voor is dan passen ze niet naast elkaar en worden ze onder elkaar gerendered. De makkelijke manier om dat op te lossen is om een minimale breedte in te stellen op je containing element (in dit geval #header_stretch), ware het niet dat IE6 geen min-width ondersteund.

Mijn voorstel is om geen floats te gebruiken, maar absolute positionering. Je zorgt met een marge op #header dat de container altijd breed genoeg is voor #header en #header_update naast elkaar. #header_update positioneer je met behulp van position: absolute aan de rechterkant. Om te zorgen dat dit positioneren ten opzichte van #header_stretch gebeurd geef je daar position: relative aan.

Regeren is vooruitschuiven

zondag 13 april 2008 16:27

Acties:

Lorduh

Topicstarter

Woow dat is een hele boterham, heb je even een voorbeeldje want eerlijk gezegd snap ik echt niet...

En ja ik heb gezocht.

[ Voor 11% gewijzigd door Lorduh op 13-04-2008 16:48 ]

zondag 13 april 2008 16:45

Acties:

Room42

Lorduh, je kunt niet in 5 minuten bepalen dat je er helemaal niets van snapt. Dat betekent namelijk dat je ook niet gezocht hebt op de interessante termen als "float" en "absolute position". Er zijn zoveel CSS tutorials op internet te vinden, ook in het Nederlands. Een hele goede Engelse is http://www.w3schools.com/css/default.asp, waar ze ook een CSS reference hebben waar je van alle CSS statements kunt lezen wat ze doen en hoe je ze moet gebruiken.

Verdiep je daar eens in, pas het toe in de praktijk. Mocht je er dan niet uit komen, laat dan zien wat je hebt geprobeerd en laat ook zien wat er mis gaat. Neem vervolgens de tijd om je te verdiepen in de antwoorden van mensen die je willen helpen.

@hieronder: Waar slaat dat nou weer op! Als jij notabene een cursus aan het volgen bent, rond die eerst eens af dan. Dan snap je ook wat men hier bedoeld

[ Voor 27% gewijzigd door Room42 op 13-04-2008 16:56 ]

"Technological advancements don't feel fun anymore because of the motivations behind so many of them." Bron

zondag 13 april 2008 16:48

Acties:

Lorduh

Topicstarter

Room42 schreef op zondag 13 april 2008 @ 16:45:
Lorduh, je kunt niet in 5 minuten bepalen dat je er helemaal niets van snapt. Dat betekent namelijk dat je ook niet gezocht hebt op de interessante termen als "float" en "absolute position". Er zijn zoveel CSS tutorials op internet te vinden, ook in het Nederlands. Een hele goede Engelse is http://www.w3schools.com/css/default.asp, waar ze ook een CSS reference hebben waar je van alle CSS statements kunt lezen wat ze doen en hoe je ze moet gebruiken.
Verdiep je daar eens in, pas het toe in de praktijk.

Volgens mij ben jij verkeerd vriend, ik heb mijn cursus hier naast mij liggen...

@hierboven Ik heb de cursus al gevolg OMG! Ik zoek gewoon even zaken op.

Got it

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
body  {
background: url(http://www.nice2you.net/images/bg2.png);
margin: 0px;
}

#header {
    background: url(http://www.nice2you.net/images/header_n2y.gif) no-repeat;
    height: 116px;
    width: 439px;
}
#header_stretch {
    background: url(http://www.nice2you.net/images/n2y_stretch.gif);
    background-repeat: repeat-x;
    widht: 100%;
    height: 116px;
    margin-left: 15px;
    margin-top: 20px;
    margin-right: 15px;
    position: relative;
        min-width: 915px;
}
#header_update {
    background: url(http://www.nice2you.net/images/n2y_updates.gif);
    height: 116px;
    width: 474px;
        margin-left: 439px;
        float: right;
        margin-top: -116px;
}

-->
</style>

</head>
<body>
<div id="header_stretch"><div id="header"></div><div id="header_update"></div></div>
</body>
</html>

Kan het nog beter?

[ Voor 44% gewijzigd door Lorduh op 13-04-2008 17:05 ]

zondag 13 april 2008 19:59

Acties:

Geert.H

@ Lorduh,
Wat er wordt bedoelt is dat jij zegt dat je hebt gezocht, echter je doet een na 5 minuten een posting. Ervan uitgaande dat je daar 2 minuten over doet heb je dus 3 minuten gezocht. Oftewel dat stelt niet zoveel voor. Als ik een probleem heb dan zoek ik daar toch over het algemeen wat langer naar.
Op het internet staan veel voorbeelden van CSS/HTML ontwerpen die meerekken. Die had je kunnen bekijken en daarvan leren.

Verder is je oplossing nu goed (althans dat kan je zelf het beste beoordelen). Denk echter ook aan IE6 gebruikers. IE6 en lager ondersteunt min-widht/height niet. Dat is echter simpel op te lossen door voor IE 6 de breedte op te geven met "width:900px" IE6 neemt width namelijk automatisch als min-widht.

zondag 13 april 2008 20:41

Acties:

Geert.H

Nog even een aanvullende opmerking. Ik zie dat je een webhosting bedrijf wilt beginnen. Wat ik je in ieder geval wil aanraden is om wel op je spelling te letten. Woorden als "mekaar" en "men" zijn geen Nederlandse woorden.
Voor een forum boeit het niet echt, maar als je zakelijk bezig wilt zijn is het altijd handig om je spelling correct te hebben

woensdag 16 april 2008 19:30

Acties:

Lorduh

Topicstarter

Ok ik ben nu al een stapje verder.

Intussen is mijn header netjes. Nu ben ik bezig met het menu en de content, maar ik zit er serieus mee te sukkelen.

Stel dat mijn menu gelijk is aan +++ (vaste waarde; 180px) en mijn content is gelijk aan ||| (veranderlijke waarde)

Dan zou mijn lay-out er zo uitzien:

+++|||+++

Nu het is mijn bedoeling dat de content mee rekt afhankelijk van de grootte van de browser.

+++||||||||||||||||||+++

Nu ja, dat is nog niet zo moeilijk maar ik wil dat dan nog eens combineren met de lengte te rekken.

+++||||||||||||||||||+++
+++||||||||||||||||||+++
+++||||||||||||||||||+++

Een zo goed als identieke lay-out vind je hieronder

Afbeeldingslocatie: http://img72.imageshack.us/img72/978/sitenitaf4sm5.th.png

woensdag 16 april 2008 19:38

Acties:

Pkunk

Volgens mij ben je op zoek naar een 3 column layout.

[ Voor 0% gewijzigd door Pkunk op 16-04-2008 20:42 . Reden: donders! Er stond een woordje verkeerd. ]

Hallo met Tim

woensdag 16 april 2008 20:46

Acties:

Lorduh

Topicstarter

Timlog schreef op woensdag 16 april 2008 @ 19:38:
Volgens mij ben je op zoek naar een 3 column layout.

Ja en nee. Het is een feit dat ik 3 kolommen moet krijgen, en dat deze in de widht-eigenschap moeten rekken, maar dat is easy. Mijn probleem is gewoonweg dat ik in de hoogte wil gaan rekken.

Ik denk dat ik het weet

Blijkbaar bestaat er iets als height: auto. Als het niet lukt horen jullie het wel

[ Voor 12% gewijzigd door Lorduh op 16-04-2008 20:59 ]

Pagina: 1

Reageer