28172 sujets

CSS et mise en forme, CSS3

Fixer une flotatnte (layout:3colonnes)

bonjour a vous tous !!

après des âpres efforts, j'ai enfin réussit à placer les 3 colonnes de suite avec float: Smiley eek

notamment grâce à Alsacreation !!

ce n'était pas aussi dur que ça, mais j'ai oublié un <div> et ca faisait un désordre énorme.... enfin j'y suis parvenu... Smiley sweatdrop Smiley sweatdrop Smiley biggrin

Mais voilà le problème: j'ai fais toutes les colonnes en %, mais dès que je change la taille de l'ecran, le bloc de droite passe en dessous du celui qui est au centre....?!

Question: existe-t-il un moyen de "fixer" une flottante? sinon comment faire un design extensible, en utilisant les %, les flottantes et faire en sorte que tout ca reste en place quelque soit le dimension!!!!

on dirait que je demande la lune....)) mais il y a bien des sites qui fonctionnes pareils......

alors aidez-moi, s'il vous plait, le debutant en CSS Smiley confused

voici les codes...

/*html*/
a écrit :
<html>
<head>
<title>$LOAD_NAME$ - $SITE_NAME$</title>
<link type="text/css" rel="StyleSheet" href="http://artyshare.clan.su/_st/my.css" />
</head>

<body>

<div id="wrap">
<!-- Header -->
<div id="header">
<div id="dataBar">$WDAY$, $DATE$, $TIME$ | <?if($USER_LOGGED_IN$)?>Logged in as <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> | Group "<u>$USER_GROUP$</u>"<?else?>Welcome <b>$USERNAME$</b><?endif?></div>
<div id="userBar"><a href="$PERSONAL_PAGE_LINK$">My profile</a><?else?> | <a href="$REGISTER_LINK$">Registration</a><?endif?> <?if($USER_LOGGED_IN$)?> | <a href="$LOGOUT_LINK$">Log out</a><?else?> | <a href="$LOGIN_LINK$">Login</a><?endif?>| </div>

<div id="logo"></div>

<div id="navBar">
<div class="navLink"><a href="$HOME_PAGE_LINK$">Main</a><?if($USER_LOGGED_IN$)?> | <a href="$RSS_LINK$">RSS</a></div>

<div class="searchBox">$SEARCH_FORM$</div>
</div>

<div style="clear:both;"></div>
</div>
</div>

<!-- /Header -->

<!-- Body -->

<div id="left">
<div class="menuTable">$SITE_MENU$</div>

<div class="boxTable"><h2>Catalog categories</h2><div class="boxContent">$CATEGORIES$</div></div>

<?if($LOGIN_FORM$)?><div class="boxTable"><h2>Login form</h2><div class="boxContent center">$LOGIN_FORM$</div></div><?endif?>

<?if($POLL$)?><div class="pollBox"><h2>Our poll</h2><div class="pollContent">$POLL$</div></div><?endif?>

</div>



<div id="middle">
<h1>$LOAD_NAME$</h1><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="80%"><a href="$HOME_PAGE_LINK$">Main</a> &raquo; Files</td>
<td align="right" style="white-space: nowrap;"><?if($ADD_ENTRY_LINK$)?>[ <a href="$ADD_ENTRY_LINK$">Add new entry</a> ]<?endif?></td>
</tr>
</table>
<hr />
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="60%">Total entries in catalog: <b>$NUM_ENTRIES$</b><?if($NUM_SHOWN$)?><br />Shown entries: <b>$NUM_SHOWN$</b><?endif?></td>
<td align="right"><?if($PAGE_SELECTOR$)?>Pages: $PAGE_SELECTOR$<?endif?></td>
</tr>
</table>
<hr />
$BODY$
<?if($PAGE_SELECTOR1$)?><div style="text-align:center;">$PAGE_SELECTOR1$</div><?endif?>
</div>

<div id="right">
<?if($CHAT_BOX$)?><div class="chatBox"><h2>Tag Board</h2><div class="chatContent">$CHAT_BOX$</div></div><?endif?>
<div id="boxTable"><h2>Site friends</h2><div class="boxContent">$GLOBAL_FRIENDS$</div></div>
<?if($COUNTER$ || $ONLINE_COUNTER$)?><div class="boxTable"><h2>Statistics</h2><div class="boxContent center">$COUNTER$<?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$$ONLINE_USERS_LIST$<?endif?></div></div><?endif?>
</div>

<div style="clear:both;"></div>


<!-- /Body -->
<!-- Footer --><div id="footer">Copyright MyCorp &copy; $YEAR$ | $POWERED_BY$</div><!-- /Footer --> </div>
</body>

</html>


/*CSS*/
a écrit :

/* General Style */
body {background:blue; margin:0px; padding:0px;text-align:center;min-width:700px;max-width:1600px;}
#wrap {background:url('http://artyshare.clan.su/images/h-l.gif') repeat-x #E2E2E2;width: expression((document.documentElement.clientWidth || document.body.clientWidth) < 1000 ? "1000px" : "auto");min-width:700px;}
#header {height:149px; background: url('http://artyshare.clan.su/FIN1.png') no-repeat;}
#dataBar {padding-top:3px;height:20px;width:60%;color:#AAAAAA;text-align:right;font-size:80%; position:absolute; left:40%; }
#userBar {padding-top:3px;height:20px;width:40%;color:#AAAAAA;text-align:left;font-size:80%;margin-left:10px; position:absolute; color: #00ff00;}
*html #dataBar {height:23px !important;}

#logo {height:50px;}

.calBox {float:right;margin:10px;width:200px;text-align:center;}

#navBar {}
.navLink {position:absolute; left:1%; top:30%;}

.searchBox {width:12%; position:absolute; left:50%; top:172px;}
.queryField {width:100% !important;border:none;background:#FFFFFF;font-size:90%}
.schQuery {float:left;width:80%;text-align:right;}
.schBtn {float:right;width:20%;text-align:left;}
.searchSbmFl {border:none;background:#333333;color:#FFFFFF;font-size:90%;}


div#left {float: left; width:15%; margin-top:10px;margin-left:10px; }
div#middle {float:left; width:69%; margin-top:10px;margin-left:10px; overflow:hidden;}
div#right {float:right; width:13%; margin-top:10px; margin-right:10px;}

.menuTable {overflow:auto; padding:0px 10px;text-align:left; background:white;}

.boxTable {width:100%;padding:0;margin:10px 0px;text-align:left; background: red;}
.boxTable h2 {width:100%;color:#EE145B;padding:10px;margin:0px;text-align:left;font-size:100%;}
.boxContent {width:90%;margin-left:auto;margin-right:auto;overflow:auto;padding:10px 0px;text-align:left;font-size:80%;}

.pollBox {width:200px;padding:0;margin:10px 0px;text-align:left; background: url('http://artyshare.clan.su/images/pollBack.gif');}
.pollContent {width:90%;margin-left:auto;margin-right:auto;overflow:auto;padding:10px 0px;text-align:left;font-size:80%;}

.center {text-align:center;background:black;}

.chatBox {margin:0; background: url('http://artyshare.clan.su/images/chat_b.jpg'); border: outset #ff3300;}
.chatContent {width:90%;margin-left:auto;margin-right:auto;}
.chatBox h1 {color:black;font-size:100%;padding:10px;}

#footer {background:url('http://src.ucoz.ru/t/834/1.jpg') bottom no-repeat #919191;text-align:right;padding:20px;font-size:90%;}
#footer a:link {text-decoration:underline; color:#EEEEEE;}
#footer a:active {text-decoration:underline; color:#EEEEEE;}
#footer a:visited {text-decoration:underline; color:#EEEEEE;}
#footer a:hover {text-decoration:none; color:#FFFFFF;}


bon il est un peu bizarre le HTML, ca vient du CMS ucoz Smiley lol
ca y est !!!! j'ai réussis........!!! merci beaucoup........... pour votre attention.........!!!!! Smiley lol

UNE solution? ))

pour avoir un design extensible, parfaitement adaptable à toutes les résolutions......

BANNISSEZ les PX des vos feuilles...... Smiley langue

!!!!!
Administrateur
nameless a écrit :
pour avoir un design extensible, parfaitement adaptable à toutes les résolutions......

BANNISSEZ les PX des vos feuilles......

Hello,

Ben, oui, tu avais oublié de faire une recherche dans les tutoriels on dirait Smiley cligne
Sujet clos
Aller à