css div problem [Archive] - Dynamic Drive Forums

alexdog1805

03-05-2010, 10:22 PM

I have this css style:

<style type="text/css">

</style>

and this html file:

<html>
<head>
<title>..::OtisWeb::.. - Web Design | Web Hosting | Optimizare Web | Service I.T. | I.T. Shop</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>

<div id="banner" align="center"><img src="images/banner.gif"></div>

<div id="pozacentrusus" align="center"><img src="images/shape46617375.gif" width="100%" height="5%"></div>

<div id="pozastanga"><img src="images/bigfinal.jpg" width="100%" height="50%"><br><br><img src="images/final.jpg" width="100%"

height="30%"></div>

<div id="pozadreapta"><img src="images/bigfinal.jpg" width="100%" height="100%"></div>

<div id="pozacentrujos" align="center"><img src="images/shape46634046.gif" width="100%" height="100%"></div>

<div id="cuvintecheie"><center>html, php, forum, v-mark, his, pc, d-link, microsoft, sony,hp, creative, dell, web design, hosting, lg,

samsung, inscrierea ava, ibm, printer, desktop, seo, mouse, ip-time, intel, gaming, horizon, laptop, notebook, director web, asus, philips,

toshiba, acer, keyboard, kingston, genius, epson, lenovo, msi, xbox360, lite on, gigabyte, lexmark, anunturi, apc, belkin , packard bell,

delux, amd, elixir, placa video, bitdefender, spire, asrock, galaxy, pqi, kingmax, biostar, carcasa, hub hosting, dezvoltare it,

consumabile, imprimanta, placa de baza, flybook, innovision, infimax, optimizare, optimizare google, web design timisoara, optimizare

timisoara, hosting timisoara, calculatoare timisoara, calculatoare arad, web design arad, optimizare web arad, magazin de calculatoare arad,

magazin de calculatoare timisoara, it arad, it timisoara</center><center>

</body>

</html>

the problem is why div "pozadreapta: isn't positioned to the right of div "poza stanga" and is positioned above of it. pls help:)

stringcugu

03-05-2010, 11:23 PM

try this
<style type="text/css">

</style>

stringcugu

03-05-2010, 11:25 PM

forgot to close the </div> in cuvintecheie

<div id="banner" align="center"><img src=" 5.gif"></div>
<div id="pozacentrusus" align="center"><img src=" 5.gif" width="100%" height="5%"></div>
<div id="pozastanga"><img src="1.gif" width="100%" height="50%"></A>
<img src="3.gif" width="100%" height="30%">
</div>
<div id="pozadreapta"><img src="usa.gif" width="100%" height="100%"></div>
<div id="pozacentrujos" align="center"><img src="6.gif" width="100%" height="100%"></div>
<div id="cuvintecheie"><center>html, php, forum, v-mark, his, pc, d-link, microsoft, sony,hp, creative, dell, web design, hosting, lg,
samsung, inscrierea ava, ibm, printer, desktop, seo, mouse, ip-time, intel, gaming, horizon, laptop, notebook, director web, asus, philips,
toshiba, acer, keyboard, kingston, genius, epson, lenovo, msi, xbox360, lite on, gigabyte, lexmark, anunturi, apc, belkin , packard bell,
delux, amd, elixir, placa video, bitdefender, spire, asrock, galaxy, pqi, kingmax, biostar, carcasa, hub hosting, dezvoltare it,
consumabile, imprimanta, placa de baza, flybook, innovision, infimax, optimizare, optimizare google, web design timisoara, optimizare
timisoara, hosting timisoara, calculatoare timisoara, calculatoare arad, web design arad, optimizare web arad, magazin de calculatoare arad,
magazin de calculatoare timisoara, it arad, it timisoara</center><center></div>

alexdog1805

03-06-2010, 03:50 PM

if I put the top with px and not with % the image will change dimensions when I change the resolution of the monitor:)

stringcugu

03-07-2010, 08:06 AM

if you want the image stay the same change the
width="100%" height="100%"
--------TO------------
width="100" height="100" image stays the same try that

alexdog1805

03-09-2010, 12:10 AM

if you want the image stay the same change the
width="100%" height="100%"
--------TO------------
width="100" height="100" image stays the same try that

if I do in that way the size of the image will change when it change the monitor rezolution.....:(

Deadweight

03-09-2010, 12:49 PM

here i think this is what u need

css (try taking out the
<style type="text/css">

</style>
because it is an extrenal style sheet.)
i thank that would help a lil

body {padding:0;margin:0}

#banner img {position:absolute;width:100%;margin:auto;border-bottom:1px solid;border-color:black;}

#pozacentrusus {position:absolute;width:100%;margin:auto;}

#pozastanga {position:absolute;width:20%;margin-top:5%}

#pozadreapta {position:absolute;position:absolute;margin-left:80%;width:20%;height:40%;top:200px}

#pozacentrujos {position:absolute;margin-top:10%;width:100%;height:5%;border-bottom:1px solid;border-color:black;}

#cuvintecheie {color:grey;width:100%}

html:

<div id="banner" align="center"><img src="images/banner.gif"></div>

<div id="pozacentrusus" align="center"><img src="images/shape46617375.gif" width="100%" height="5%"></div>

<div id="pozastanga"><img src="images/bigfinal.jpg" width="100%" height="50%"><br><br><img src="images/final.jpg" width="100%"

height="30%"></div>

<div id="pozadreapta"><img src="images/bigfinal.jpg" width="100%" height="100%"></div>

<div id="pozacentrujos" align="center"><img src="images/shape46634046.gif" width="100%" height="100%"></div>

<div id="cuvintecheie">
<center>html, php, forum, v-mark, his, pc, d-link, microsoft, sony,hp, creative, dell, web design, hosting, lg,

samsung, inscrierea ava, ibm, printer, desktop, seo, mouse, ip-time, intel, gaming, horizon, laptop, notebook, director web, asus, philips,

toshiba, acer, keyboard, kingston, genius, epson, lenovo, msi, xbox360, lite on, gigabyte, lexmark, anunturi, apc, belkin , packard bell,

delux, amd, elixir, placa video, bitdefender, spire, asrock, galaxy, pqi, kingmax, biostar, carcasa, hub hosting, dezvoltare it,

consumabile, imprimanta, placa de baza, flybook, innovision, infimax, optimizare, optimizare google, web design timisoara, optimizare

timisoara, hosting timisoara, calculatoare timisoara, calculatoare arad, web design arad, optimizare web arad, magazin de calculatoare arad,

magazin de calculatoare timisoara, it arad, it timisoara</center></div>

alexdog1805

03-11-2010, 08:19 PM

the problem is this:(for example)

#pozadreapta {margin-top:-37%;margin-left:80%;width:20%;height:40%}

#pozacentrujos {margin-top:25%;width:100%;height:5%;border-bottom:1px solid;border-color:black;}

if in the css code #pozacentrujos is below #pozadreapta like the example before, in the html the div pozacentrujos will consider margin-top:0 the distance between pozadreapta div not margin-top:0 from the start of the screen.how can I fix that?

alexdog1805

03-24-2010, 04:32 PM

now I have problems with the text.in what should I exprime the writing to remain at the same size and format when I change the monitor rezolution?in what dimensions is better to write?px, em or % ?

BLiZZaRD

03-24-2010, 06:41 PM

There's a question. But I have another one.. Why do you want your text to remain the same size no matter the resolution? You only want people with 20/20 vision to look at your stuff?

People with low resolutions, bad eyesight, or crappy monitors need the flexibility of being able to increase text size for their benefit.

With that said, read this article (http://www.alistapart.com/articles/howtosizetextincss/) as it covers all the methods of sizing text and how to best go about it.

Personally I would stick to px, because they are easier to re-size, and I would rather have someone read my words and ruin my layout on their screen than the other way around.

jql999@yahoo.com

03-24-2010, 08:51 PM

Personally I would stick to px, because they are easier to re-size, and I would rather have someone read my words and ruin my layout on their screen than the other way around.

You mean ems for text right?

I use ems for text and px for padding and margins. That seems to be the best combination for resizing text and keeping it readable.

Just be careful with nesting. If your <li> is 1.2em and you have to nest lists for some reason, you get into trouble really quick.

I only use % for divs when I really don't care about exact placement.

BLiZZaRD

03-25-2010, 08:09 PM

No, I mean px for font size. When visitors use ctrl+ or crtl- to re-size, the pixels are what is re-sized the most accurately. Pixels are fixed sizes based on the monitor resolution. If you code fonts in px, they can re-size once or twice (sometimes more) without effecting the layout design). Once you use ems it re-sizes everything as a whole.

alexdog1805

03-31-2010, 07:01 AM

yes but a lot of people leave the page when they see that standard dimensions aren't at standard size.