Problème d'images avec css; elle est bien là

Zaba -
Zaba - 8 août 2009 à 17:35

Bonjour,

Voilà avec mon copain on se lance dans l'aventure du blog, et comme c'est moi la plus calée de nous deux là-dedans c'est moi qui me colle toute la partie du codage pour le layout. Sauf que je m'y connais pas suffisement, j'ai besoin de votre aide siouplait !

J'ai pris un layout que j'ai trouvé sur bloggertemplates et je l'ai modifié (j'ai évidement laissé les crédits à l'auteur de ce layout).

Ce que j'aimerais maintenant, ce serait insérer une image en haut de la page. Alors dans ma feuille css je fais un rubrique image, puis dans html je mets ma rubrique <img id='image' src=...> etc...
Mais quand je veux visualiser, l'image n'apparait pas... Est-ce que vous pourriez me dire ce que je fais de faux ?

Je suis pas sûre de m'être fait comprise, alors voilà un print de la situation :

(Vous pouvez voir le petit carré de l'image inexistante dans le cadre rouge en haut à gauche...)

Et voilà le code :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATATemplate Style
Name: Clean Home
Designer: Mid Mo Design
URL: https://bestwebsitedesign.com/
Date: 21 julr 2009
Updated by: Dhampire
----------------------------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
background-color:transparent;
}

body {
font-family:Arial, serif;
font-size:14px;

}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

a {
border-bottom:1px dotted #000;
text-decoration:none;
color:#000;
font-weight:600;
}
a:hover {
color:#e12000;
border-bottom:1px dashed #e12000;
background-color:#f7f7f7;
}
hr{
margin-top:35px;
border:0;
border-top:1px dotted #ccc;
width:620px;
color:#fff;
clear:both;
}
#wrapper {
width:900px;
margin:40px auto;
}

/************** HEADER *****************/

#header-wrapper {
float:left;
width:900px;
border-bottom:1px dotted #ccc;
margin:0;}

#header{float:left;
width:auto;
padding:18px 0 34px 0;}

#header h1 {
color:#162F30;
font-size:60px;
font-weight:600;
text-decoration:none;
border-bottom:none;
letter-spacing:-4px;
background-color:#fff;
}

#header a {
color:#162F30;
font-size:60px;
font-weight:600;
text-decoration:none;
border-bottom:none;
letter-spacing:-4px;
background-color:#fff;
}

#header a:hover {
color:#000;
}

#header .description {
font-size : 18px;
font-weight : 200;
padding : 12px 4px 0 0;
letter-spacing : -1px;
}

/**************NAV************************/
#nav {
float:right;
width:auto;
padding:12px 0 0;
}
#nav ul {
height:50px;
float:right;
}
#nav li {
text-align:center;
float:left;
display:inline;
width:auto;
}
#nav li a {
font-size:20px;
font-weight:400;
display:block;
padding:15px;
border-bottom:none;
}
#nav li a:hover {
background-color:#f7f7f7;
}
/************** BLURB *******************/
#blurb {

border-bottom:1px dotted #ccc;
height:450px;

}

/************** CONTENT *****************/

#main-container {

}

#main-wrapper {
width:620px;
float:left;
border-right:1px dotted #ccc;
padding:0 0 30px 0;
min-height:420px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}

/************** POSTS *****************/
.post {padding:0 30px 0 0;
}

.post p {
margin:14px 0 14px 0;
}
.post em{
font-style:italic;
}
.post h2 {
font-family:Georgia;
font-size:24px;
margin:25px 0 10px 0;
font-weight:normal;
}
.post h1, .post h1 a{
font-family:Georgia;
font-size:28px;
margin:30px 0 10px 0;
font-weight:normal;
line-height:32px;
}
.post h3, .post h4 {
font-family:Georgia;
font-size:20px;
margin:15px 0 10px 0;
font-weight:normal;
}
.post h4 {
font-size:18px;
}
.post h1:hover, .post h2:hover, .post h3:hover, .post h4:hover {
color:#e12000;
}
.post .indent {
padding-left:10px;
}
.post .indent p {
padding-left:10px;
}
#small {
font-size:11px;
}
#small a {
font-weight:normal;
}
.post .alignright {
float:right;
margin-left:10px;
}
.post .alignleft {
float:left;
margin-right:10px;
}
.post .aligncenter {
margin:0 auto;
display:block;
}
.post abbr {
font-weight:normal;
}
.post ul{
list-style:circle;
margin:0 0 0 25px;
}
.post ol{
list-style:decimal;
margin:0 0 0 30px;
}

.post-footer {
margin: .75em 0;
}

.comment-link {
margin-left:.6em;
}
.post img {
background:#f7f7f7;
border:1px solid #ccc;
margin:10px;
text-align:center;
padding:5px 0 0;
}
.post img a, .post img a:hover {
border-bottom:0;
}
.post blockquote {
color:#777;
border-left:5px solid #ccc;
margin:15px 30px 0 10px;
padding-left:20px;
}
.post pre {
font-family:courier;
font-size:12px;
letter-spacing:-1px;
margin:14px 0 14px 0;
}

/************** COMMENTS *****************/
#comments h3, #comments h4{
font-family:Georgia;
font-size:24px;
margin:35px 0 5px;
font-weight:normal;
}
#comments h4{
font-size:28px;
}

#comments-block {
margin-top:20px;
border:1px dotted #ccc;
border-right:0;
padding:10px 5px 20px 10px;
min-height:110px;
}
#comments-block .comment-author {
font-family:Georgia;
font-size:18px;
font-weight:normal;
border-bottom:1px dotted #ccc;
}
#comments p {
margin:10px 0 0 10px;
width:auto;
}

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

/*******************Image**************/

#image {
position: center;

}

/************** SIDEBAR *****************/

#sidebar-wrapper {
width:250px;
float:right;
margin:0 0 25px 0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.sidebar {
}
#sidebar h2 {
padding:25px 0 3px 0;
font-size:18px;
}
.sidebar ul {
}

.sidebar li {
border-top:1px dotted #ccc;
}
.sidebar li a {
background:transparent url('http://3.bp.blogspot.com/_t47uhxwKFVM/SmanRTZ9EyI/AAAAAAAABHw/15HOCmb13-s/s1600/bullet_black.gif') no-repeat scroll 6px 52%;
font-size:13px;
font-weight:normal;
padding:2px 0 2px 15px;
display:block;
border-bottom:none;
}
.sidebar li a:hover {
background:#f7f7f7 url('http://3.bp.blogspot.com/_t47uhxwKFVM/SmanRrEUvXI/AAAAAAAABH4/kyrV9S6bRac/s1600/bullet_red.gif') no-repeat scroll 6px 52%;
}
.sidebar .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}

/************** PERFIL *****************/
.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 5px solid #E7E9E3;
}

.profile-data {
margin:0;
font: arial;
color: #000;
font-weight: bold;
line-height: 1.6em;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

.profile-link {
font: #000;
letter-spacing: .1em;
}

/************** FOOTER *****************/
#footer {
width:900px;
float:left;
border-top:1px dotted #cccccc;
text-align:center;
padding:30px 0 40px 0;
}

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}]></b:skin>
</head>

<body>

<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Zaba i Ogurek (en-tête)' type='Header'/>
</b:section>

<div id='nav'><ul>

<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a></li>
<li><a href='mailto:XXX'>E-mail Zaba</a></li>
<li><a href='mailto:XXX'>E-mail Ogurek</a></li>
</ul>
</div>
</div>
<div id='blurb'><img id='image' src='http://img30.imageshack.us/i/bnirezabkaiogurek.jpg/'/></div>
<div id='main-container'>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogList1' locked='false' title='Là-haut' type='BlogList'/>
<b:widget id='BlogArchive1' locked='false' title='Archives du blog' type='BlogArchive'/>
<b:widget id='LinkList1' locked='false' title='Autres activités' type='LinkList'/>
</b:section>
</div>

</div>


<div class='clear'> </div>

<div id='footer'>
<p>© Copyright 2009 | <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> | Theme by <a href='http://midmodesign.com/'>Columbia, MO Web Design</a> | Bloggerized by <a href='http://dhampirito.blogspot.com' target='_blank'>Dhampire</a>
| All Rights Reserved</p>
<p/>
</div>
</div>
</body>
</html>

Afficher la suite

A voir également:

Problème d'images avec css; elle est bien là
Des images - Guide
Tapez cette phrase, en respectant bien les espaces et la ponctuation. - Guide
Je suis content que tu vas bien ou que tu ailles bien - Forum Réseaux sociaux
Images enregistrées ✓ - Forum Bluetooth
Voir ses images enregistrés - Forum Blender

1 réponse

Réponse 1 / 1

Zaba

Zut j'ai oublié de dire siouplait et de mettre le print =/

[URL=https://imageshack.com/][IMG]http://img268.imageshack.us/img268/4365/sanstitre1bth.th.jpg[/IMG][/URL]

Voilà voilà, j'espère que vous pourrez m'aider, merci !

Discussions similaires

cette phrase est elle correcte

calcule nombre des pixels "noir" dans un image (noir/blanc)

Vérifier que le server freebox est bien connecté à internet

j'suis content, j'suis content de Bach vieille chanson française

probleme sommet

Votre réponse

Discussions similaires