aligning tables divs and iframes

@omagic28Aug 10.2007

hello everyone

i have a site that uses quite a bit of divs but I designed it with an 800×600 monitor. So i didn’t realize until know that if my tables are set to “center” they will adjust to any resolution but my divs won’t. Is there a way I can themm to adjust and align themselves with the content of behind them on the tables?
I’ve never really used iframes so i don’t know if they could help. I use divs because i can give them custom image scrollbars and because they’re transparent. but if I frames can give the same result and can be aligned with my tables then i’d be happy to learn how to use them. I’m sorry if this seems a little to basic, but I’d really appreciate any help you can give me. Thanks

to post a comment

HTML

@digitalentropyAug 10.2007 — #I'm confused, you have <div> tags over top <table> tags? Can you show your code? Have you thought about using .css to set the locations and alignment?

@omagic28authorAug 10.2007 — #Thanks for the quick response. No, I hadn't used css could you give me an example of one that could do that?

the site I'm building is this

www.loscentenarios.com

it looks kinda ugly now since I still need to load a lot of content. What I want to do is have all the content appear on the two boxes in the bottom and that they'll realign to the diferent resolutions. thanks again.

@ray326Aug 10.2007 — #Add this style:

#Tabla_01 { margin:0 auto }

@digitalentropyAug 10.2007 — #You do use style, but instead of being in a .css file you simply put it at the top of the .html.

I must say, <table> isn't the way to handle layout and design. Also, <iframe> isn't the best tag either. <div> tags are definitely the way to go. You can name your <div> using 'id' and then use javascript to hide and show the <div>.

for instance,

<script type="text/javascript">

var divisions = new Array("div_I","div_II","div_III");

function information_div(section) {

for (i=0;i<=2;i++) {

if (section == divisions[i]) {

document.getElementById(section).style.display = 'block';

} else {

document.getElementById(divisions[i]).style.display = 'none';

}

}

}

</script>

<a href="#" onclick="information_div('div_I')">Display div_I</a>

<a href="#" onclick="information_div('div_II')">Display div_II</a>

<a href="#" onclick="information_div('div_III')">Display div_III</a>

<div id="your_first_block">

<div id="div_I" style="display:none">Biography here</div>

<div id="div_II" style="display:none">Photos here</div>

<div id="div_III" style="display:none">Contact information here</div>

</div>

<div id="your_second_block">

you could make another function here to display the photos you offer in the "your_first_block" division above.

</div>

aligning tables divs and iframes

4 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

aligning tables divs and iframes

4 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #HTML _↴