INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

website images and text overlapping

website images and text overlapping

(OP)
Hi

i am a starter with css and need your help cause my website have his images and text overlapping when i reduce my internet Windows or change the resolution.

is there a way to prevent thi to happen?

heres my code

html {width:100%}

body {font-family:Arial, Arial, Helvetica, sans-serif; font-size:20x; line-height:20px; color:#8e847c;}

.boxed {
border: 1px solid #d2c8c6 ; margin-left:322px; margin-right:321px; height:1000px; box-shadow: 5px 5px 5px #d2c8c6;
}

#cssmenu ul {
margin-top:0;
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
position: relative;
top:-20px;
display: block;
height: 40px;
text-transform: uppercase;
font-size: 14px;
background: transparent url('fond-menu-n.jpg') repeat-x top left;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-weight:bold;
width: 1002px;
}
#cssmenu li {
display: block;
float: right;
margin: 0;
pading: 0;
border-right: 1px solid #ffffff;
}
#cssmenu li a {
display: block;
float: left;
color: #000000;
text-decoration: none;
padding: 12px 20px 0 20px;
height: 24px;
height: 40px;
}
#cssmenu li a:hover {
background: transparent url('fond-menu-over-n.jpg') repeat-x top left;
}

.str_box{margin-right:50px;border-right:1px solid #d2c8c6;padding-right:20px;}

.img_droite{border:3px solid #e8e3e2; float:right; margin-left:10px; margin-right:10px; margin-top:5px; padding:0px}
.img_gauche{border:3px solid #e8e3e2; float:left; margin-left:10px; margin-right:10px; margin-top:3px; padding:0px}
.img_bas{border:3px solid #e8e3e2; float:left; margin-left:9px; margin-right:9px; margin-top:3px; padding:0px}

.list2{}
.list2 li{ background:url(../images/marker1.png) 0 4px no-repeat;text-align:justify; padding-left:20px;margin-bottom:8px;}
.list2 a{}


/*===============================>> Paragraphs <<=============================*/

p {margin-bottom:20px;text-align:justify;text-justify:inter-word;margin-left:15px; margin-right:380px }
.p2{ margin-bottom:9px;}
.p3{margin-bottom:12px;}
.p4{margin-bottom:32px;}
.p5{margin-bottom:25px;}

/*===============================>> H <<=============================*/
/* Header styles */
h1,h2,h3,h4,h5,h6{line-height:1.3em;color:#474646;font-family: Helvetica, Arial, Verdana, sans-serif, serif;text-shadow:1px 1px rgba(68,43,38,0.36);font-weight:normal;}
h1{font-size:40px;}
h2{font-size:35px;}
h3{font-size:30px;}
h4{font-size:27px;}
h5{font-size:20px; margin-left:15px; margin-top:-5px}
h6{font-size:22px;}


#footer {
border-radius: 10px; margin-bottom:1100px;
}

#contact-form input {margin:0;font-size:11px; border:1px solid #e7e7e7; color:#8e847c; padding:11px 7px 12px;outline:none; position:relative; font-family:Arial, Helvetica, sans-serif;background:#fff;border-radius:5px;}


and heres the code of my index.html pages

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link rel="stylesheet" href="style.css">
</head>

<div class="boxed">
<img src="images/logo1.png" alt="" />
<div id='cssmenu'>
<ul>
<li class='last'><a href='contact.php'><span>Contact</span></a></li>
<li><a href='soumission.php'><span>Soumission</span></a></li>
<li><a href='entreposage.html'><span>Entreposage</span></a></li>
<li><a href='equipement.html'><span>Équipement</span></a></li>
<li><a href='demenagement.html#'><span>Déménagement</span></a></li>
<li class='active'><a href='index.html'><span>Acceuil</span></a></li>
</ul>
</div>
<div class="str_box1">
<img class="img_droite" src="images/dem-1-acceuil-n.jpg" alt="" /><br />
<h5>PROFESSIONNALISME - CONFIANCE - EXPÉRIENCE</h5>

<p class="p3">Déménagement St-Germain s'est bâti un solide réputation au cour des dernières années dans le domaine du déménagement. Notre soucis du détails et notre minutie font de nous le choix numéro 1 pour votre déménagement</p>

<p class="p3">Notre équipe de professionnel sont là pour répondre à vos besoin et ce 7 jours sur 7 / 24 heures par jour. Que ce soit pour un déménagement local ou longue distance, montérégie et rive sud, nous couvrons un très grand territoire.</p>

<p class="p3">Nous possédons une flotte de camion pour les petits comme les grands besoin, ainsi que les équipements nécessaire pour prendre soin de vos biens</p>
<img class="img_droite" src="images/dem-3.png" alt="" />
<p>Au plaisir de pouvoir vous servir !</p>


<p class="p3">N'hésitez pas à nous contacter, vous ne pourrez qu'être satisfait.</p>
<br /><br /><br /><br />
<h5>MONTÉRÉGIE - RIVER SUD - LONGUE DISTANCE</h5>

<img style="position:relative;bottom:-15px;" src="images/bas-page.png" alt="" />
</div>
</div>



<body>
</body>
</html>


also i have another questions the logo images on top the road is supposed to be in front of the menu not behind is there a way to do this?

here's the link to see what i meen : www.demenagementstgermain.com

thanks a lot for your help

RE: website images and text overlapping

Hi,
I visited the link to have a look at your website and you appear to have not uploaded it to your server.
However, if you look at w3schools.com ( css z index property ) this
will help you with the problem your having with your images.

Hope this is useful

Steve

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close