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" "<html xmlns="<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 :
thanks a lot for your help
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" "<html xmlns="<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 :
thanks a lot for your help