two images side by side Solved

Question

Hello, I would like to place two images side by side, but separated. You will understand by looking at my site: http://vistlip.free.fr Actually, in the left frame, I would like the two images that are one below the other to be at an angle.  Thank you.  -- .: itsuki power shunyuu ! :.

alex59fr · Answer

Hello, I see this: in the middle of the site? It should only be placed between and To align your images side by side, you need to add in CSS the property display:inline And float:right for the right image & float:left for the left image ... -- Mental manipulation and personality destruction, thirst for money and numbing of society, TV is, quite simply, a cult. Configuration: Ubuntu 9.10 in DualBoot with Windows

Atropa · Answer

Good evening, I quickly modified it with Firebug, is this the result you want?

By the way, there are 21 HTML errors in your code http://validator.w3.org/ http://jigsaw.w3.org/css-validator/

sena-kaitani · Answer

alex59fr, could you elaborate on your answer please (the first one) -- .: itsuki power shunyuu ! :.

alex59fr · Answer

You have your two images, I don't know how you make them appear, but not with an img src, so you have to use a class in CSS, I don't know which one, it's up to you to decide which class to use.  For the class on the right, you need to add: display:inline; float:right; for the one on the left you need to add display:inline; float:left;  Is it a bit clearer?  -- Mental manipulation and destruction of personality, thirst for money and dumbing down of society, television is nothing less than a cult. Configuration: Ubuntu 9.10 in DualBoot with Windows

sena-kaitani · Answer

I made a div, XHTML:

and the CSS: #menu2 { width: 500px; height: 80px; background-image: url("menu.gif"); background-repeat: no-repeat; background-position: left; } #menu3 { width: 500px; height: 80px; background-image: url("menu.gif"); background-repeat: no-repeat; -- .: itsuki power shunyuu ! :.

alex59fr · Answer

#menu2 { width: 500px; height: 80px; background-image: url("menu.gif"); background-repeat: no-repeat; background-position: left; float:left; display:inline; } #menu3 { width: 500px; height: 80px; background-image: url("menu.gif"); background-repeat: no-repeat; float:right;display:inline; }   -- Mental manipulation and destruction of personality, thirst for money and dumbing down of society, television is nothing more than a cult. Configuration:  Ubuntu 9.10 in DualBoot with Windows

sena-kaitani · Answer

It's not working, the image doesn't even display... It only shows if I set it to width:140px, because (css): #menu /* The menu */ { float: left; /* The menu will float to the left */ } -- .: itsuki power shunyuu ! :.

alex59fr · Answer

140 px? Above I see 500px ... -- Mental manipulation and destruction of personality, thirst for money and dumbing down of society, television is nothing more than a cult. Configuration:  Ubuntu 9.10 in DualBoot with Windows

sena-kaitani · Answer

I just changed... Go see, I managed to place it to the right of the frame, but not next to the other image above... -- .: itsuki power shunyuu ! :.

alex59fr · Answer

You need to add the display:inline property to your two elements as mentioned twice above -- Mental manipulation and destruction of personality, thirst for money and numbing of society, television is nothing more than a cult. Configuration:  Ubuntu 9.10 in DualBoot with Windows

sena-kaitani · Answer

It's already done since the second time you told me. But it doesn't work. --> http://vistlip.free.fr -- .: itsuki power shunyuu ! :.

alex59fr · Answer

For your divs, use a CLASS attribute instead of an ID, so instead of putting in the CSS #menu2, put .menu2  Then make a div that surrounds the other two divs with the property:  display: block; width: the width; height: height;  EDIT: Immediately remove: width: 500px; !!! -- Mental manipulation and personality destruction, thirst for money and dumbing down of society, television is nothing more than a cult. Configuration: Ubuntu 9.10 in DualBoot with Windows

Atropa · Answer

Did you try to modify this:

like I did in my first post... or you can directly replace menu2 and menu3 with this in your CSS: #menu2 { width: 40px; height: 40px; background-image: url("menu.gif"); float:left; } #menu3 { width: 40px; height: 40px; background-image: url("menu.gif"); float:right; }

sena-kaitani · Answer

Thank you very much Atropa!! It works with the first method, thanks of course to you too alex59fr! I put this:

Go see the box on the left: http://vistlip.free.fr -- .: itsuki power shunyuu ! :.

alex59fr · Answer

You're welcome, see you next time :) -- Mental manipulation and destruction of personality, thirst for money and numbing of society, TV is nothing more than a cult. Configuration: Ubuntu 9.10 in Dual Boot with Windows

sena-kaitani · Answer

I have a problem, I succeeded with the two images at the top, but I can't do the same for those at the bottom! XHTML:
and the css, I took back those from the two images I put at the top: #menu2 { width: 500px; height: 80px; background-image: url("menu.gif"); background-repeat: no-repeat; background-position: left; } #menu3 { width: 140px; height: 80px; background-image: url("menu.gif"); background-repeat: no-repeat; background-position: right; } ps: what is in bold in the xhtml is the 2 images that should go at the bottom of the frame. go see http://vistlip.free.fr -- .: itsuki power shunyuu ! :.

Atropa · Answer

Hello,   you should remove the style attributes from the tags and replace #menu2 and #menu3 with this:  #menu2 { width: 40px; height: 40px; background-image: url("menu.gif"); float:left; } #menu3 { width: 40px; height: 40px; background-image: url("menu.gif"); float:right; }   if you change your CSS like this, you won't need the style tags anymore.   then for the divs below, you just need to add margin-top: 40px;

sena-kaitani · Answer

There is a problem when I make my div look (image) when I write the word menu turns red. And when I add 6:

it turns black as if it doesn't work. Without the "6": http://ups.imagup.com/06/1259472237.jpg With the "6": http://ups.imagup.com/06/1259472294.jpg So of course it won't work... -- .: itsuki power shunyuu ! :.

notobe · Answer

[edit: bug, sorry for the noise...]

sena-kaitani · Answer

?? -- .: itsuki power shunyuu ! :.

Atropa · Answer

fichier css :

```css
/*debut de l'alignement... pour l'image d'accueil */ 
body { 
    width: 760px; 
    margin: auto; 
    margin-top: 20px; 
    margin-bottom: 20px; 
} 
p { 
    color:#1e90ff; 
} 
#entete { 
    width: 700px; 
    height: 300px; 
    background-image: url("http://ups.imagup.com/06/1259315573.jpg"); 
    background-repeat: no-repeat; 
    background-position: center; 
    /*fin pour l'alignement... de l'image d'accueil */ 
} 
ul {
    /* Ma liste aura des puces avec l'apparence d'une photo */ 
    list-style-image: url("sharingan.gif"); 
    list-style-position: inside; 
} 
#menu {
    /* Le menu */ 
    float: left; 
    /* Le menu flottera à gauche */ 
    width: 150px; 
    /* Très important : donner une taille au menu */ 
    background-repeat: repeat-x; 
    background-color:#c0c0c0 ; 
    border: 2px solid black; 
    margin-bottom: 10px; 
    /* Pour éviter que les éléments du menu ne soient trop collés */ 
} 
.menuImgR { 
    width: 40px; 
    height: 40px; 
    background-image: url("menu.gif"); 
    float:right; 
} 
.menuImgL { 
    width: 40px; 
    height: 40px; 
    background-image: url("menu.gif"); 
    float:left; 
} 
#menu4 { 
    clear:both; 
    height:60px ; 
    background-image: url("menu2.gif"); 
    background-repeat: no-repeat; 
    background-position: center; 
}
```

fichier html :

```html

accueil

image 
            vidéo 
            mes tuteurs 
            plus...

bienvenue 
        ce site consite a parler de l'anime eyeshield 21. Vous y retrouverez tous sur cette anime.

au revoir 
        blaaablalaa

```

sena-kaitani · Answer

THANK YOU, it works perfectly.
I thought that if I added "class", when we click on the image (by holding down), we could take the image, but I don’t really know how to do it.

Thanks everyone.
.: itsuki power shunyuu ! :.

Two images side by side - Page 2

bienvenue

au revoir

Remove amazon cloudfront

Without smartphone

E.tre456.worm.windows

Pc audio connection: jack ports, hi-fi chain

No sound for sms arrival

Windows security

How to uninstall cubbie web search

Impossible internet connections

Cursor issue on word doc

How to activate my facebook account deactivate