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 ! :.

Configuration: Windows Vista Firefox 3.5.5

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

22 answers

Rock music from a nulle part ailleurs live performance

Asus f17, black screen!

Unable to enter my phone number on twitter

Associate tv with phone

Panoramic wifi camera notice yilot

Upgrade to windows 11?

Change pin code

Where is the saved file, i have the name, not the location

Get office for free

The computer won’t start.