[CSS] Floating box verpest mijn tekstinstellingen...

Pagina: 1
Acties:

  • Rexomnium
  • Registratie: September 2000
  • Laatst online: 15-08 01:22

Rexomnium

Vincam aut moriar

Topicstarter
Met het volgende stukje CSS krijg ik een vakje in de tekst waarin ik bijvoorbeeld een plaatje kan zetten. De tekst vouwt zich automatisch om de tekst heen, dus zo krijg ik een prachtige layout.
Dit is de CSS:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.leftbox, .rightbox {
    margin: 3px;
    padding: 3px;
    font-size: 12px;
    color: #000000;
    text-align:justify
    width: 20%;
}
.leftbox {
    float: left;
    
}
.rightbox {
    float: right;   
}


Nu heb ik in de desbetreffende tabel waarin ik deze 'box' wil zetten de tekst volgens het volgende stukje CSS gedefinieerd...
JavaScript:
1
2
3
4
5
6
7
.content
        {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000000;
        text-align:justify
        }


Indien ik dus ergens in de tekst een box heb neergezet, komt de tekst daar achterna er anders uit te zien. Ik kan die tekst bijvoorbeeld ook aanpassen met ctrl + scrollwiel etc. Justify doet het ook niet.

Hier is nog een voorbeeld:

We zijn allemaal vaandeldrager in een optocht van gekwetsten.


  • coubertin119
  • Registratie: Augustus 2002
  • Laatst online: 20-08 15:43
Je moet een keer je CSS door een CSS Validator halen, op regel 6 van de eerste zut code ontbreekt een ; en op regel 6 van 't tweede stukje ook.
HTML Validator: http://validator.w3.org
CSS Validator: http://jigsaw.w3.org/css-validator

En wil je geloven dat ik het niet begrijp?

[ Voor 37% gewijzigd door coubertin119 op 16-02-2003 11:51 ]

Skat! Skat! Skat!


  • Rexomnium
  • Registratie: September 2000
  • Laatst online: 15-08 01:22

Rexomnium

Vincam aut moriar

Topicstarter
coubertin119 schreef op 16 February 2003 @ 11:35:
Je moet een keer je CSS door een CSS Validator halen, op regel 6 van de eerste zut code ontbreekt een ; en op regel 6 van 't tweede stukje ook.
HTML Validator: http://validator.w3.org
CSS Validator: http://jigsaw.w3.org/css-validator

En wil je geloven dat ik het niet begrijp?
Die puntkomma's zitten wel bij het oorspronkelijke css-bestand, ik had de boel even niet zo goed overgenomen.

Je ziet de opgegeven website toch wel? Als je kijkt naar het eerste artikel, zie je de eerste alinea justified (uitgelijnd). De volgende 3 alinea's hebben dat niet. Ook kan je de tekstgrootte van de laatste drie alinea's aanpassen met ctrl + scrollwiel, dus met je browser.

Ik wil dat niet. Ik wil dat AL mijn tekst justified is en op de correcte manier wordt 'geparsed(?)'.

Is het nu wat duidelijker?

We zijn allemaal vaandeldrager in een optocht van gekwetsten.


Verwijderd

• Post ook je HTML eens
• Gooi ff een screenshot online, want bij mij in Phoenix ziet 't er gewoon ok uit...

  • Rexomnium
  • Registratie: September 2000
  • Laatst online: 15-08 01:22

Rexomnium

Vincam aut moriar

Topicstarter
Verwijderd schreef op 16 February 2003 @ 14:29:
• Post ook je HTML eens
• Gooi ff een screenshot online, want bij mij in Phoenix ziet 't er gewoon ok uit...
Ja, het is al gelukt. Het justify werkt. In plaats van <p class="content"> heb ik <div class="content"> gebruikt.

Het enige waar ik nu nog over val, is het feit dat de plaatjes buiten de inhoud komen te staan als ik de website bekijk met opera.. Je kan het zie op http://www.laatmenou.nl/cms

Dit is mijn html:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table width="550" border="0" cellspacing="0" cellpadding="3" bgcolor="#FFFFFF">
  <tr> 
    <td colspan="2" class="contentTitle"> 
      <p class="title"><%title%></p>
    </td> 
  </tr>
  <tr> 
    <td colspan="2" class="contentText"> 
      <div class="content"><%body%></div>
    </td>
  </tr>
  <tr> 
    <td class="contentComment"> 
      <p class="datcom"><%comments%></p>
    </td>
    <td class="contentDate"> 
      <p class="datcom">Door <a href="<%authorlink%>"><%author%></a> op <%date%> @ <%time%></p>
    </td>
  </tr>
</table>
<br>


HTML stukje dat verantwoordelijk is voor de box om het plaatje te laten zien
HTML:
1
<div class="rightbox">[img]"http://www.pcmusic.co.za/idols/images/idols_logo.jpg"</img></div[/img]


Het stukje CSS dat verantwoordelijk is voor hoe het eruit ziet is:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.content
        {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000000;
        text-align: justify;
        }
.contentText    
        {
        border-left: 1px solid #000000;
        border-right: 1px solid #000000;
        }

.leftbox, .rightbox    
                                {
                    margin: 3px;
                    padding: 3px;
                    font-size: larger;
                    width: 20%;
                                }

.leftbox      
                                {
                    float: left;
                    }

.rightbox                  {
                    float: right;   
                                }


Hoe komt het dat ik het niet goed te zien krijg in Opera?

[ Voor 40% gewijzigd door Rexomnium op 16-02-2003 15:19 ]

We zijn allemaal vaandeldrager in een optocht van gekwetsten.


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

RexomniuM schreef op 16 February 2003 @ 15:15:
[...]
Hoe komt het dat ik het niet goed te zien krijg in Opera?
Omdat je de width van je box op 20% hebt gezet. Je container (de td) heeft een breedte van 550 pixels, dus je plaatje krijgt maar 110 pixels. De rest wordt geclipped.

Intentionally left blank


  • Rexomnium
  • Registratie: September 2000
  • Laatst online: 15-08 01:22

Rexomnium

Vincam aut moriar

Topicstarter
Problemen zijn opgelost. Bedankt voor de hulp iedereen.

We zijn allemaal vaandeldrager in een optocht van gekwetsten.

Pagina: 1