[CSS] "bottom:0" ignoré?

par **Jag** » 20 oct. 2012, 18:05

J'ai corrigé ça mais rien n'a changé, je crois que j'ai pété un truc en essayant de "purifier" les divs, maintenant le menu reste décalé par rapport à la colonne, je suis perdu là :/

#Middle: div qui englobe la colonne et le contenu, permet d'aligner la hauteur de la colonne au contenu à chaque page.

#Colonne: div qui englobe la sidebar et le block de pied de page, visiblement sans trop de succès.

.sidebar: div qui encadre la sidebar et la search bar.

#sidebar: div pour parametrer la sidebar.

#search: div pour parametrer la search bar.

#blockpieddepage : div qui encadre le bouton paypal, le RSS et le compteur de visites.

#middle {
background: url("images/bkgrndmenu.jpg") repeat-y scroll 0 0 transparent;
display:inline;
float:left;
width: 800px;
margin-top:-5px;
}

#colonne {
float: left;
min-height: 500px;
width: 200px;
}

.sidebar {
position: relative;
margin: auto 15px 20px auto;
}

#sidebar {
list-style-type: none;
font-size: 1.2em;
color: #FF3;
width: 200px;
}

#sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 0px;
}

#sidebar a {
color:#FF3; 
text-decoration:none;
}

#sidebar a:hover {
color:#FF3; 
text-decoration:none;
}

#sidebar a:active {
color:#FF3; 
background-color: #FFFF00;
}

#sidebar a:visited {
color:#FF3; 
text-decoration:none;
}

#search {
width: 200px;
}

#blockpieddepage {
position: absolute;
width: 200px;
bottom: 0;
}

<!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 profile="http://gmpg.org/xfn/11">

<link rel="icon" type="image/jpg" href="/images/favicon.jpg" />

<link rel="stylesheet" type="text/css" href="style.css" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title><?php bloginfo('name') ?><?php if ( is_404() ) : ?> &raquo; <?php _e('Not Found') ?><?php elseif ( is_home() ) : ?> &raquo; <?php bloginfo('description') ?><?php else : ?><?php wp_title() ?><?php endif ?></title>

    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    <!-- leave this for stats -->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /><?php wp_head(); ?>
 
    <?php wp_get_archives('type=monthly&format=link'); ?>
    <?php //comments_popup_script(); // off by default ?>
    <?php wp_head(); ?>

</head>

<body>
<div id="page">
<div id="header">
<a href="<?php bloginfo('url'); ?>">
<div id="banniere">
</div><!-- fin div banniere-->
</a>
<nav id="access" role="navigation">
                <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
                <?php wp_nav_menu( array( 'menu' => 'menu_pages' , 'theme_location' => 'primary' ) ); ?>
</nav><!-- #access -->
<div id="banniere2"">

</div><!-- fin div banniere2-->

</div><!-- fin div header-->

<div id="middle">

<div id="colonne">
<div id="list_articles">
<?php get_sidebar(); ?>
</div><!-- fin div list_articles-->

<div id="blockpieddepage">

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
<input type="image" src="https://www.paypalobjects.com/fr_FR/FR/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !">
<img alt="" border="0" src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" width="1" height="1">
</form>
<br />
<a href="<?php bloginfo('rss2_url'); ?>"><img src="/images/rss-icon.jpg" border="0" alt="RSS" width="40" /></a>
<br />
<img src="http://clx.leapingtiger.org/counter.php?x=1225" width="149" height="30" />
</div><!-- fin div blockpieddepage-->

</div><!-- fin div colonne-->

Quelqu'un saurait me dire où j'ai merdé?

edit: le HTML correspond au header.php

par **Aureusms** » 20 oct. 2012, 17:08

Même chose...

.sidebar {
display: block;
position: absolute;
float: left;
margin: auto 15px 20px auto;

essaye :

.sidebar {
display: block;
position: relative;
margin: auto 15px 20px auto;

Attention position:relative permet le positionnement en fonction du dernier ancêtre positionné et en fonction des frères supérieurs positionnés

par **Jag** » 20 oct. 2012, 16:22

Bon, décidément je m'en sors pas avec ces positionnements CSS...

Maintenant, la sidebar est également décalée et je ne parviens pas à la remettre en place :/

Est-ce que vous voyez quelque chose qui cloche dans ce code?

.sidebar {
display: block;
position: absolute;
float: left;
margin: auto 15px 20px auto;
}

#sidebar {
list-style-type: none;
font-size: 1.2em;
color: #FF3;
width: 200px;
}

#sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 0px;
}

#sidebar a {
color:#FF3; 
text-decoration:none;
}

#sidebar a:hover {
color:#FF3; 
text-decoration:none;
}

#sidebar a:active {
color:#FF3; 
background-color: #FFFF00;
}

#sidebar a:visited {
color:#FF3; 
text-decoration:none;
}

#search {
width: 200px;
margin: auto 15px 20px auto;	
}

#blockpieddepage {
border: dotted #C00 3px;
width: 200px;
bottom: 0;
}

par **Aureusms** » 20 oct. 2012, 11:17

Oui. Bottom tout comme top ou right ou left doivent être sous format positionné. Concrètement position: abosolute | relative | fixed; S'il n'y a pas de mot clef position : XXX, bottom ou right ou top ou left sont ignorés.

par **Jag** » 18 oct. 2012, 21:28

Normal tu ne peux pas être en position : absolute et en float : left en même temps. Comme float : lefts intervient après la position:absolute; ton bottom:0 est ignoré.

Ha bah ça je ne savais pas par exemple... je comprend mieux pourquoi ça coinçait.

Par contre j'ai essayé de supprimer le float: left du coup, ça n'a pas fait de différence, donc j'ai remis le block dans la dvi "middle" qui encadre la barre latérale et le content, toujours pas de différence, donc j'ai aussi viré le position: absolute, là il arrête d'empiéter sur la sidebar, mais il reste tout de même collé en dessous.

là concrètement le code CSS est réduit à ça:

#blockpieddepage {
width: 200px;
bottom: 0;
}

Une idée de pourquoi le bottom : 0 est toujours ignoré? Il m'avait semblé comprendre qu'il positionnait un élément par rapport à un contenant, est-ce que ça ne s'applique qu'aux objets flotants? et si oui, comment je peux faire pour qu'en float: left et bottom: 0, le contenu ne s'arrête pas en haut de ce block?

par **Aureusms** » 18 oct. 2012, 20:57

Normal tu ne peux pas être en position : absolute et en float : left en même temps. Comme float : lefts intervient après la position:absolute; ton bottom:0 est ignoré.

par **Jag** » 18 oct. 2012, 05:22

Bonjour,

En attendant de pouvoir m'inscrire (il parait que je suis un spam), j'ai besoin d'un coup de main concernant le CSS.

Tout d'abord, je précise que je vie en Colombie, donc excusez le décalage, si je compte bien il est 5h du matin en France.

Le problème est le suivant:

Je suis en train de refaire mon site web que j'ai passé sous wordpress afin de faciliter la publication d'articles, suite à des conseils... pas toujours très avisés d'un forum wordpress, je me suis retrouvé à refaire toute la structure du site (autrefois en tables html, certes pas très pro mais fonctionnel) en CSS, c'est pas que ça m'ait fait chier, mais il se trouve que grâce à ça j'ai dépassé ma timeline d'une semaine et je continue de perdre du temps.

A force de prise de tête interminables, j'ai réussit à tout remettre dans l'ordre, à l'exception d'un détail:

http://www.le-jaguar.net/blog/

Vous pouvez voir ici le site web en construction (retirez le /blog pour voir la version actuelle du site, mais ce n'est pas vraiment utile), comme vous pouvez le voir, une série de boutons (paypal, RSS et le compteur de visite, on va les apeller le "block de pied de page") vient harceler sexuellement la sidebar, j'ai essaye de le placer dans presque toutes les différentes div possibles, sans succès, idem en trifouillant le CSS je n'aboutis pas à ce que je veux.

L'objectif est de parvenir à maintenir ce block sur la colonne latérale, tout en bas, juste au dessus de la barre de fin de page, sachant que le taille du contenu varie évidement d'une page à l'autre.

Le code CSS actuel est le suivant:

#blockpieddepage {
width: 200px;
position: absolute;
float: left;
bottom: 0;
}

Le "bottom:0" n'a strictement aucun effet, si je supprime le "position: absolute" je parviens à le maintenir à la position voulue, mais le contenu lui, s'arrête a la hauteur du block et laisse une grand marge vide, si je laisse le "position: absolute" le block ne gène plus le contenu mais vient se ficher là ou il est actuellement.

Est-ce que quelqu'un à une idée, ou rien qu'une piste de ce qui cloche?

Merci d'avance.

[CSS] "bottom:0" ignoré?

Répondre

Étendre la vue Revue du sujet : [CSS] "bottom:0" ignoré?

Re: [CSS] "bottom:0" ignoré?

Re: [CSS] "bottom:0" ignoré?

Re: [CSS] "bottom:0" ignoré?

Re: [CSS] "bottom:0" ignoré?

Re: [CSS] "bottom:0" ignoré?

Re: [CSS] "bottom:0" ignoré?

[CSS] "bottom:0" ignoré?