Div i.p.v. tabel

Status
Niet open voor verdere reacties.
W

woutervanzet

Gebruiker
Lid geworden
1 sep 2007
Berichten
9
Ik ben al een tijdje bezig een oplossing te zoeken voor dit:
Ik heb een tabel, 1 kolom, 2 rijen. in de bovenste cel staat een foto, in de onderste de titel daarvan.
De tabel staat linksboven op een pagina. Tekst begint rechts van de tabel en na de titel gaat de tekst naar links en loopt verder door op de pagina.
www.tennysonsbirthplace.co.uk

Hetzelfde wil ik bereiken maar nu met divs.
Wie oh wie..?
Dank alvast,
Wouter
 
gokje: je wilt dit omdat je bezig bent met responsive design :thumb:
Maar nu antwoord op je vraag...
tenminste ik begrijp het niet helemaal. Waar staat die tabel??
boven aan de pagina. Volgens mij is dat de enige tabel.
 
Zou je een plaatje kunnen maken (in bijv. Paint) met wat je precies bedoeld? Dat zou stukken meer helpen.
 
Op de Homepagina staat een afbeelding met tekst er omheen.
Ik wil een titel onder de foto en de tekst moet om beide heen lopen zoals het nu om de fot loopt.
Dat wil ik met divs bereiken. Wat responsive design met mijn vraag te maken heeft vat ik niet.
 
HTML: 
<img src="http://www.tennysonsbirthplace.co.uk/wp-content/uploads/2012/12/Logo-St-Margarets-JJ-150x150.jpg"/>
<div style="margin:0 auto;">St MARGARET'S SOMERSBY the birthplace of Tennyson</div>
Ik zie dat je website schaalt als je het venster kleiner maakt.
Responsive design is dat je de content aanpast op het scherm van je gebruiker. Dus je content schaalt dit is bij jou ook zo.
Alleen je table schaalt niet mee.
Verklein en vergroot je beeldscherm maar eens.

Misschien heb je dit perongeluk met wordpress ofzoiets gedaan.
 
Wat responsive design is weet ik maar mijn vraag gaat over divs.
Ik probeer het nog een keer. Kan iemand me helpen met mijn vraag?
 
ik heb ook een stukje html gegeven. misschien dat je daar iets aan hebt???
zoniet wat schort daar aan???
 
Dank voor de code. In mijn haast had ik die over het hoofd gezien.
Alleen werkt het niet zoals ik wil. Voeg ik tekst toe dan komt die onder de titel en niet naast de afbeelding en de titel. Helaas...
 
HTML: 
<div style="padding:10px;height:80px;width:940px;color:#fff;background:#646687;position:relative;">


<div style="padding-bottom:7px;color:#fff;position:absolute;bottom:0;right:0;">
<span style="font-size:13.5px;color: #FFFFFF;font-family: arial,helvetica,sans-serif;line-height:14px"><em>&quot;...To strive, to seek, to find, and not to yield.&quot;</em>&nbsp;&nbsp;<div style="display:inline;position:relative;border:solid 0px #f00;" id="esplayer_1_tmpspan"><canvas id="esplayer_1" style="cursor:pointer;width:50px; height:16px;" width="50px" height="16px"></canvas></div><div style="position:absolute;left:-3000px;"><input type='button' title='play or stop' onclick="Array_EsAudioPlayer[0].func_acc_play_stop();return -1;"/></div><input type="hidden" id="esplayervar1" value="simple|esplayer_1|978b8b8fc5d0d0888888d18b9a9191868c90918c9d968d8b978f939e9c9ad19c90d18a94d0888fd29c90918b9a918bd08a8f93909e9b8cd0cdcfcecdd0cecdd095909791a098969a93988a9ba08a93868c8c9a8cd1928fcc||50px|16px|-0px|0.0||-999|-999|0|false|false|false||100|||">
</span>
</div>




<div style="float:left;padding-left: 156px;">
<span style="font-family: arial,helvetica,sans-serif;">St MARGARET'S<br>
<span style="font-size:20px;">SOMERSBY</span><br>
<span style="font-size:14px;">the birthplace of Tennyson</span></span>
</div>
<div style="text-align:center;margin-right:200px;">
<img class="alignnone size-thumbnail wp-image-885" alt="Logo St Margarets" src="http://www.tennysonsbirthplace.co.uk/wp-content/uploads/2012/12/Logo-St-Margarets-JJ-150x150.jpg" style="max-width:85px" />
</div>

</div>
dan zou het zoiets moeten zijn.
 
Dank Arjan, dit is zeer nuttig want daarmee kan ik de header die ik nu nog in een tabel heb omzetten naar divs maar...
misschien was het niet duidelijk, het gaat me om de content op de pagina, niet de header. Is dat duidelijk genoeg?
Groet,
Wouter
 
kun je het nog één keer heel duidelijk uitleggen.
het gaat om de content op de pagina...
wat moet er dan nog gebeuren.
 
dus je zegt ik wil de pagina in divs maken.
ipv een table toch???
ik zie op de hele test pagina geen enkele table meer staan of ben ik nou gewoon gek.
het zijn al allemaal divs.
 
De website is gemaakt in Wordpress met het thema Waever.
Daarin heb ik o.m. de pagina's gemaakt in een editor met 'Raw html.'
Omdat ik de marges niet goed kreeg heb ik het gedaan met een tabel maar dat werkte ook niet goed omdat Weaver of Wordpress mijn marges veranderde.
Ik heb toen inderdaad de tabel losgelaten en heb het met onderstaande code gedaan:

Code: 
[caption id="attachment_650" align="alignleft" width="293"]<img class=" wp-image-650 " style="border: 1px solid #646687; margin: 0px 12px 3px 0px;" alt="St Margarets Church Somersby Summer 2012" src="http://www.tennysonsbirthplace.co.uk/wp-content/uploads/2012/12/St-Margarets-frontaal-m-pleister.jpg" width="293" height="220" /> St Margaret's Church[/caption]
This website has been set-up to help raise enz.

Blijkbaar maakt Wordpress/Weaver er divs van.
Het hoofdprobleem is dat ik op geen enkele manier de marges goed kreeg.
Dus ik dacht dat met divs te kunnen oplossen. Nu ik de broncode heb bekeken zie ik inderdaad divs.
Ik zou hiermee in een html bestand verder kunnen gaan stoeien ware het niet dat als ik het nu in een html bestand stop de tekst toch weer onder de titel verschijnt i.p.v. ernaast.
Sorry voor de verwarring.
 
geeft niet.
Ja tabellen gebruiken is ook niet de beste oplossing nee.
Misschien dat je dit moet doen om je marges goed te krijgen.

*{margin:0;padding:0;}

ik zet dat eigenlijk standaard in mijn css. Dan doe je alle padding en margins zelf.
Elke browser behandelt de standaard marge en padding weer anders.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan