20 Novembre 2017 à 01:19:13

Auteur Sujet: Faire des cadres avec CSS + Images  (Lu 1792 fois)

Flore

  • Espoir
  • ***
  • Messages: 101
  • Points gagnés: 1
    • Voir le profil
Faire des cadres avec CSS + Images
« le: 11 Juin 2007 à 16:49:41 »
Bonjour à tous,

Je suis en train de préparer un Template (sur une page) pour une amie.

J'ai préparée mes fichiers images.

J'ai plusieurs questions, mais la première est la suivant :

Dans la div "principal" je souhaite mettre un cadre fin
autour du texte, et que ce cadre pousse la page vers le bas
au fur et a mesure que l'on ajoute du contenu dedans.

Le haut de mon cadre est class="box_haut" (avec image)
Le contenu du cadre est class="box_contenu" (avec image)
Le bas du cadre class="box_bas" (avec image)

Mon soucis est que le haut de cadre n'est pas a la bonne place, càd
, il est au dessus de ma navigation.

Puis, je n'arrive pas a faire en sorte que les ligne vertical de mon cadre,
coordonne avec box_bas et box_haut.

le code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Template</title>
<link rel="stylesheet" href="template.css" type="text/css" />
</head>

<body>
<div id="global">
<div id="header"></div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Accueil</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="#">Menu 7</a></li>
</ul>
</div>
<div class="box_haut"></div>
<div id="principal">
<div class="box_contenu">
<h1>Vendigna feugait</h1>
<p> ut wis nonsequipit wisi et acipit niam ipissi bla facil eu faccum dunt nullamc onsendre dolessisit luptat.
Tio dignism olenis do conulluptat aliquat wisi.
Od eu feugiamet, quate del iusci blandit augiamcon ulla core dolore dit volumsan velis at inissequat, velenim am, conum duis at wis del in utatem inis nim nibh er accum in hent adit ilis nim vullamet aliquisim in ulputat. Ipis digna feuipiscil utatum acin vulputpat veros augait nulla feummodit autat wis acil dolore dit, sectet, si.
Bore molorper susto dolor summy nullandre core dip ea commy nonsequipsum nisi.
Henis at. Equatum velit wisim quis nonsenibh et lutat, sum voloreet wismodit nulla feu faci eugue commy num iusciduis acing exerit la feuisl ing esequatie tie feugiat lut aliquis non etuer sustrud el dolorper am nostis ad dolut wisim zzriliquam ing elenit lor sit adignit ipit vullan veleseq uisisse quatem et lortionullan ullan erostrud tet lortio eugait, quatio od modolortinim zzrit, conullam, consequipis nit acilla consectem iurer iurercilisim zzril ex euissed dolore facing et, veliqua tionullam qui blandigna consequisim iliquam consectet praestisim ver adio odolobore tetummy nummy nibh eum doloreet nismolortis er sequametue feugiam, quisit la con ulputpat. Tem quat. Ut alit, quam iureriu stincil iquissequis nit wisi ex exer accumsandit nulla commolortie doleseniamet inciniat praeseq uatuer si tem voloreet luptate erci eummy nullum in ercilit velissed magna corer ip ero commodo conse eum vero dolorper si blan vero commod erciliquat. Velit del ulputpat. Ut elit luptatin ulluptat num eugiam quis dolorperit acilit nulla feuguer sequis nim enim ero dolor iure conullaortie erat. Andre velis nonsed doloboreetue volesequat. Ure diamet, sequis nonsenim dolenim vel irilla consecte veleniam vero exerciduissi tat. Duisit, veliquip exer am zzrillu ptatet nibh erit alit aut euguero dit velit wis non veliquatet ulla feum quis augiat. Duipisismod eum veraesed ea facinit ulput amet alisci tat. Ut luptat ullaorem ad essequat. Voluptatinim irit, conse mincidunt ip essectem et</p></div>
<div class="box_bas"></div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

le code CSS :

body {
background-image: url(img/fond.png);
}

#global {
clear: both;
position: relative;
top: 5px;
width: 824px;
left: 0px;
margin: auto;
border: 1px solid #000;
background: #7993C0 url(img/container_background.png) repeat-y top center;
}

#header {
position: relative;
width: 824px;
margin-left: auto;
margin-right: auto;
height: 220px;
background: #7993C0 url(img/header.jpg) no-repeat;
}

#navcontainer {
font-family: Arial, sans-serif;
margin: 0 auto;
border-bottom: 1px solid #ddd;
margin-top:35px;
margin-right: 12px;
width: 628px;
height: 40px;
float: right;

}

#navlist {
width: 80%;
text-align: center;
margin: 0 auto;
padding: 0;
text-indent: 0;
list-style-type: none;
}
#navlist li {
padding: 0;
margin: 0;
text-indent: 0;
display: inline;
}
#navlist li a {
letter-spacing: -1px;
text-decoration: none;
color: #ccc;
font-size: 1em;
padding: 0 2px;
border-top: .5em solid #eee;
}
#navlist li a:hover,#navlist a#current {
color: black;
border-top: none;
font-size: 1em;
}
#navlist a#current {
color: #757dee;
}

#principal {
background-color: #fff;
width: 617px;
margin-top: 107px;
margin-left: 190px;
height: 590px;
}

div.box {
position: relative;
background: #7993C0 url(img/box_milieu.png) repeat-y top center;
padding: 0px;
}

div.box_haut {
position: relative;
text-align: center;
padding: 4px 10px 4px 10px;
min-height: 8px;
background: transparent url(img/box_haut.png) no-repeat center top;
}

div.box_contenu {
width: 617px;
color: #333333;
overflow: hidden;
padding: px 8px 8px 8px;
background-image: url(img/box_milieu.png);
background-color: transparent;
}

div.box_bas {
font-size: 0.5em;
text-align: center;
padding: 0px;
min-height: 8px;
background: transparent url(img/box_bas.png) no-repeat center bottom;
}

#footer {
z-index: 10;
position: relative;
width: 824px;
height: 70px;
margin-left: auto;
margin-right: auto;
background: #7993C0 url(img/footer.png) no-repeat top left;
}

p {
color: #333;
font: 13px "Trebuchet MS", Arial, "Times News Roman", sans-serif;
}

Merci
--

Flore