[CSS] Images naast menu, zonder scrollbars..

[mtlife]

wat ik probeer is eigenlijk, is om mijn main content nog gecentreerd te houden in de browser, terwijl er aan de linker en rechter kant plaatjes staan (een soort boekensteunen dus..). Deze plaatjes zijn vrij groot, dus mochten er users browsen met een lagere resolutie moeten eigenlijk deze plaatjes gecropt worden. Dus zonder horizontale scrollbar te doen laten verschijnen, ik weet niet of dit mogelijk is met alleen css of dat ik toch een soort van php code ook nog in me site nodig heb?

dus eigenlijk bedoel ik ongeveer dit:

[Verwijderd]

overflow: auto|hidden

lijkt me prima moeten lukken. Wat heb je zelf geprobeerd?

En hoe dacht je hier iets met php te doen? php==serverside

[ Voor 74% gewijzigd door Verwijderd op 01-06-2007 18:44 ]

[BikkelZ]

Je zou die boekensteunen als achtergrondplaatjes moeten gebruiken, en dan met background-position aan de gang gaan.

[Mei]

Afbeeldingen altijd als achtergrond gebruiken, tenzij ze bij de content horen, dan mag je een IMG tag gebruiken. Jouw afbeeldigen horen bij het design en je moet ze dus met CSS als achtergrondafbeelding toepassen. Dan heb je gelijk het probleem niet meer Lees anders ook dit artikel eens door over het gebruik van afbeeldingen.

[mtlife]

Verwijderd schreef op vrijdag 01 juni 2007 @ 18:41:
overflow: auto|hidden

lijkt me prima moeten lukken. Wat heb je zelf geprobeerd?

En hoe dacht je hier iets met php te doen? php==serverside

overflow werkt dus niet, krijg ik alsnog balken... dat had ik dus zelf al geprobeerd .. en php is idd serverside, maar je kan wel bijvoorbeeld in je webpagina embedded css code gebruiken en die met php aanpassen. Of je kan met php de image zelf gaan croppen, maar dat is natuurlijk een no-no voor de performance etc..

BikkelZ schreef op vrijdag 01 juni 2007 @ 19:03:
Je zou die boekensteunen als achtergrondplaatjes moeten gebruiken, en dan met background-position aan de gang gaan.

background images van tables bedoel je? iets van:

HTML:

<td width='100%' background=plaatje></td>
<td width='780'> inhoud etc.. </td>
<td width='100%' background=plaatje></td>

[Mei]

Mei schreef op vrijdag 01 juni 2007 @ 19:27:
je moet ze dus met CSS als achtergrondafbeelding toepassen

Met CSS dus

Tabellen mag je alleen maar gebruiken voor tabulaire data. Vuistregeltje: Als je op papier een tabel zou gebruiken, dan mag het op een webpagina ook. Alles wat grafisch is (positionering, styling) gaat met CSS en niet met HTML.

[mtlife]

hmm daar moet ik morgen ff naar kijken dan, moet nu weg naar feestje.. ik laat t morgen ff weten!

[Verwijderd]

mtlife schreef op vrijdag 01 juni 2007 @ 19:30:
[...]

overflow werkt dus niet, krijg ik alsnog balken... dat had ik dus zelf al geprobeerd .. en php is idd serverside, maar je kan wel bijvoorbeeld in je webpagina embedded css code gebruiken en die met php aanpassen. Of je kan met php de image zelf gaan croppen, maar dat is natuurlijk een no-no voor de performance etc..


[...]


background images van tables bedoel je? iets van:

HTML:

<td width='100%' background=plaatje></td>
<td width='780'> inhoud etc.. </td>
<td width='100%' background=plaatje></td>

weet je uberhaupt waar je over praat?
Niet om je aan te vallen, maar je html is brak, met php kom je nooit aan de afmetingen van je window (eventueel via een postback, maar da's gewoon onzin) en de css overflow property kan er wel degelijk voor zorgen dat je balken verdwijnen. Werkt dus wel, maar waarschijnlijk doe je gewoon iets fout.

[mtlife]

Verwijderd schreef op vrijdag 01 juni 2007 @ 20:13:
[...]

weet je uberhaupt waar je over praat?
Niet om je aan te vallen, maar je html is brak, met php kom je nooit aan de afmetingen van je window (eventueel via een postback, maar da's gewoon onzin) en de css overflow property kan er wel degelijk voor zorgen dat je balken verdwijnen. Werkt dus wel, maar waarschijnlijk doe je gewoon iets fout.

nou sorry dat ik niet alles weet net zoals een 1337 hax0r, niet iedereen kan het zo goed als jij natuurlijk. Ik ben gewoon nog aan het leren, ik kom ergens niet uit kan het niet vinden op google. En die overflow werkt bij mij echt niet, sorry.. staat toch echt in de body tag van de css file. Ik vraag geloof ik iets heel netjes, met duidelijke beschrijving erbij hoe en wat. Heb geen zin in geflame. (En ff tussen haakjes, die html was als voorbeeld bedoelt.. natuurlijk niet echte code, maar dat snapt een slimmerik als jij wel natuurlijk )

Maar goed back on topic, hoe kan ik plaatjes op de achtergrond plaatsen zonder img tag, of zonder tables? want met een img tag komen natuurlijk de balken weer terug!

[dB90]

Wat mophor zegt is waar hoor.

-knip-en de css overflow property kan er wel degelijk voor zorgen dat je balken verdwijnen. Werkt dus wel, maar waarschijnlijk doe je gewoon iets fout.

En als je een beetje goed zoekt op CSS, kun je gemakkelijk vinden hoe je een plaatje als achtergrond instelt van een div. Laat eens wat relevante code zien van wat je al geprobeerd hebt adhv de tips die je hebt gekregen, dan kunnen we je misschien zeggen waarom overflow het niet doet en of je backgroundimages goed gebruikt etc etc.

[mtlife]

dB90 schreef op zaterdag 02 juni 2007 @ 17:03:
Wat mophor zegt is waar hoor.
[...]


En als je een beetje goed zoekt op CSS, kun je gemakkelijk vinden hoe je een plaatje als achtergrond instelt van een div. Laat eens wat relevante code zien van wat je al geprobeerd hebt adhv de tips die je hebt gekregen, dan kunnen we je misschien zeggen waarom overflow het niet doet en of je backgroundimages goed gebruikt etc etc.

ik heb het nu met tables ( ) maar het werkt niet goed zoals verwacht, zodra de table ook maar de kans krijgt om aan de zijkanten in te krimpen doet hij het. Ik heb geprobeerd met div's te doen en relative positioning maar dan moet ik de divjes compleet over de main content zetten wil ik het plaatje zien. Kan niet gewoon dit doen:

[code=css]
<div id='plaatje'></div>
[code]

wat met img tags en relative positioning wel kan, maar dan krijg je last van die balken dus.

wat ik nu heb:

Cascading Stylesheet:

#main { 
    height:100%;
    text-align: left;
    vertical-align: middle;
}

#menu {
    border-left: 1px solid white;
    background-color: rgb(0,33,0);
    width: 120px;
}

#content {
    border-right: 1px solid white;
    background-color: rgb(0,33,0);
    width: 580px;
}
    
td.leftsidekick {
    background-image: url(toad.gif);
    background-attachment: fixed; 
    background-repeat: no-repeat ;
    width: 50%;
    position: relative;
    right: 0pt;
    top: 0pt;
}

td.rightsidekick {
    background-image: url(koopa.gif);
    background-attachment: fixed; 
    background-repeat: no-repeat;
    position: relative;
    width: 50%;
    left: 0pt;
    top: 0pt;
}

en html:

HTML:

<table id='main' cellspacing='0' cellpadding='5'>
    <tr valign='top'>
        <td class='leftsidekick'></td>
        <td id='menu'>
            <!-- menu -->
        </td>
        <td id='content'>
        <br /> 
            <!-- content -->
        </td>
        <td class='rightsidekick'></td>
    </tr>
</table>

[dB90]

Ik raad je toch aan om het niet met tables te doen...Die zijn voor tabulaire data bedoeld zoals je weet. Zet gewoon eerst een goede structuur op met divs en lees je in over de overflow property. Op die manier leer je weer wat en denk ik dat je toch sneller en beter bereikt wat je wil toch? Het is namelijk best mogelijk wat jij wil, alleen pak je het niet goed aan en dan blijf je prutsen met die tables. CSS properties waar je misschien even naar moet kijken zijn: position, overflow, z-index. Het moet lukken!

[mtlife]

dB90 schreef op zaterdag 02 juni 2007 @ 18:47:
Ik raad je toch aan om het niet met tables te doen...Die zijn voor tabulaire data bedoeld zoals je weet. Zet gewoon eerst een goede structuur op met divs en lees je in over de overflow property. Op die manier leer je weer wat en denk ik dat je toch sneller en beter bereikt wat je wil toch? Het is namelijk best mogelijk wat jij wil, alleen pak je het niet goed aan en dan blijf je prutsen met die tables. CSS properties waar je misschien even naar moet kijken zijn: position, overflow, z-index. Het moet lukken!

het moet idd lukken! en ben het met je eens dat ik zo wat leer, ik ga me ff inlezen in die properties.. zodra ik een nette oplossing heb dan post ik die.. komt morgen denk ik wel

[dB90]

Succes!