dubbele rand en nog een dubbele rand

[jeel2008]

hallo ,

1a. zie bijlage test.jpg
de code om dit te krijgen is, bij mij dan toch, dit:

<div style="float: left; padding: 10px; width: 150px;"><img alt="handinhand" src="images/stories/jmcdesign/handinhand.jpg" style="clear: both; padding: 3px; border: medium solid #090; margin-bottom: 10px; background-color: #39c;" width="142" height="201" /> <img alt="handinhand" src="images/stories/jmcdesign/handinhand.jpg" style="clear: both; padding: 3px; border: medium solid #009900; margin-bottom: 10px; background-color: #3399cc;" /><img alt="handinhand" src="images/stories/jmcdesign/handinhand.jpg" style="clear: both; padding: 3px; border: medium solid #090; margin-bottom: 10px; background-color: #39c;" width="142" height="201" /></div>
<div>Lorem ipsum dolor sit amet, etc...</p>
</div>

echter, kan dat niet iets subtieler dan met "width=150px" om de fotootjes onder elkaar te krijgen? (en csshunter, mocht je dit lezen: ik vind de manier die ik gebruik weer zo 'van dik hout zaagt men planken' . en dit gezegde klopt, itt de plank misslaan, wél vermoed ik).

1b.want stel nu eens dat ik maar 1 foto had en de tekst toch rechtdoor had willen laten lopen, dus lijnrecht naar onder, zie test2.jpg. hoe had ik dat dan kunnen verwezenlijken?

2. een laag-prioriteitsvraagje, maar toch wel interessant:
ik heb wat zitten experimenteren met een dubbele rand rond een foto. dat ging prima.
je gooit er een padding in en een achtergrond kleur. zie wederom test.jpg, fotootjes links.
maar stel dat ik daaromheen nog een rode en een gele rand wil, dus vier randen, dan houdt ook css het voor gezien neem ik aan?

 

[papagaai35]

1a: Je kunt met <br /> werken. (Ik begrijp niet wat je zegt tussen haakjes over css, maar als je css wil gebruiken kun je op http://www.w3schools.com/ terecht voor een goede tutorial)
1b: Je kunt ook met <frame> gaan werken, waarbij je 1 frame je foto's zet en in een ander frame je tekst. Zie hier. (je kunt hetzelfde doen met <div>)
2b: Wat dacht je van:

<div style='border:1px solid #FFFF00'><div style='border:1px solid #FF0000'><!-- Jouw plaatje met dubbele rand hier--></div></div>

 

[jeel2008]

hallo papagaai
dat is een idee, twee divjes.
bedankt.
en van die haakjes: dat was even tegen csshunter, iemand die op dit forum regelmatig antwoord geeft op cssproblemen die ik ondervind.

 

[csshunter]

Hé, je komt hier soms bekenden tegen.
De float met de dik geplankte width:150px; is op zich prima (eigenlijk hoort elke float een opgegeven breedte te krijgen).
Het <br />'retje erbij maakt het wel zo subtiel, maar door de img-breedte duiken ze vanzelf wel. Niet verkeerd!

Frames zou ik absoluut niet aan beginnen!

Duizenddubbele randjes
Met extra <div>'jes (of: <span>'s) kan je inderdaad zoveel extra randjes maken als je wilt. Een toepassing zit hier in de menu-knoppen.

<ul>
   <li id="home"><a href="..."><span><span>Startpagina</span></span></a></li>
   <li id="rubr-nws"><a href="..."><span><span>Nieuws</span></span></a></li>
</ul>

De twee spannetjes zitten er alleen bij om de randjes mooi vloeiend te maken (de knoppen zijn dus géén images! Ook de hovers zijn css-hovers).
Met als css in hoofdlijnen:

#menu-block a { 
    background: #F2DECC; color: #000080; 
    border-top: 1px solid #EBC6A7; 
    border-right: 1px solid #BE722E;
    border-bottom: 1px solid #BE722E;
    border-left: 1px solid #EBC6A7;
    }
#menu-block span {
    display: block; 
    }
#menu-block a span {
    border-top: 1px solid #FDF0E5; 
    border-right: 1px solid #D8AA82; 
    border-bottom: 1px solid #D8AA82; 
    border-left: 1px solid #FDF0E5;
    }
#menu-block span span {
    position: relative; /* correction IE */
    display: block; 
    padding: 3px 2px 3px 2px; 
    margin: 0px; 
    border-width: 1px;
    }
#menu-block a span span {
    border-top: 1px solid #F2DECC; 
    border-right: 1px solid #E7CAB1; 
    border-bottom: 1px solid #E7CAB1; 
    border-left: 1px solid #F2DECC;
    }

Het bouwen van zoiets is even ... spannend, maar als het er eenmaal staat heb je er in een handomdraai een nieuwe knop bij: niks tekenen, gewoon een <li> erbij in de html en karren maar.

• Een motief hiervoor was, dat de pseudo knoppen er nu schaalbare letters in kunnen hebben: de knopteksten zijn gewone html.
  Als de bezoeker het letterformaat aanpast aan zijn/haar behoeften (klik op brilletje en probeer), groeit de knop gewoon mee. Met een img lukt dat niet zo 1-2-3; dan moet je er 2 of 3 images per knop voor maken, plus ook een bergje css om ze in stelling te brengen. En 't geeft ook weer langere downloadtijd.

=====
Gescheiden kolommen

1b.want stel nu eens dat ik maar 1 foto had en de tekst toch rechtdoor had willen laten lopen, dus lijnrecht naar onder, zie test2.jpg. hoe had ik dat dan kunnen verwezenlijken?

Ja, als er ergens een float zit, onttrekt deze zich aan de "normal flow" van de html-beweging, die alles opvult waar er maar plaats is. De teksten zitten hier in de normal flow, en vliegen dus naar links zodra de floatende kolom is opgehouden.
Twee opties om dit aan te pakken deze keer:

1. De rechter-teksten óók in een float zetten en naar links (of rechts) laten drijven, want floats kunnen niet om een hoekje. Dit wordt vaak gedaan bij een twee- of drie-koloms opbouw.
2. De rechter-inhoud in een <div> zetten en deze een margin-left geven ter waarde van de de breedte van de flotende linkerkolom (of wat meer om een beetje afstand te houden).
   
   Bovenaan, waar de kolom wel is, loopt deze linkermargin denkbeeldig onder de kolom door, en schuift daar de tekst niet naar rechts! Dat is een doordenkertje: de rechterinhoud ziet de drijvende kolom niet als kolom met een breedte, omdat die zich aan de normal flow onttrokken heeft. Dus de margin van de rechterkant begint gewoon aan de linkerkant van de linkerkolom, en niet aan de rechterrand van de linkerkolom. Maar de rechterkant ziet wel de tekst in de drijvende kolom staan (de linkerkolom staat eerder in de html), en waar tekst staat, mag er geen nieuwe tekst overheen komen > dus opzij.​

 

[jeel2008]

het hoekje om of niet

'De rechter-inhoud in een <div> zetten en deze een margin-left geven ter waarde van de de breedte van de flotende linkerkolom (of wat meer om een beetje afstand te houden). '

ik had het zelf kunnen bedenken (maar waarom doe ik dat dan niet?)
geniaal! natuurlijk, zo eenvoudig, doch doeltreffend.

 

[csshunter]

De eerste keer dat ik dit ergens las, stond ik ook paf. En dan vergeet je het ook niet meer.