Immagine In Linea Con Testo HTML CSS

Scuse ancora nuove a tutto questo. Sto creando una pagina web e ho un'immagine e un testo l'uno accanto all'altro, in due div separate. Sono riuscito a portarli dove voglio sulla pagina, ma quando ridimensiono la pagina il testo si ridimensiona, ma l'immagine no. Voglio che la parte inferiore del testo sia allineata con la parte inferiore dell'immagine in ogni momento.Immagine In Linea Con Testo HTML CSS

Qualsiasi aiuto apprezzato! Ecco il codice:

<head> 

    <title>Stefano Mocini</title> 
    <link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css'> 
    <link href='styles/style.css' rel='stylesheet' type='text/css'> 
</head> 

<body> 

    <div id="title"> 
     Stefano Mocini 
    </div> 

    <div id="decal"> 
     <div id="image"> 
      <img src="images/tree.png" alt="tree" width="600" height="900"> 
     </div>  
    </div> 

    <div id="about"> 
     <p>THANK YOU SO MUCH FOR YOUR REVIEWS; YOUR DONATION AND FOR SHARING MY MUSIC!!!</p> 

     <p>About me: I started made music when I was only 6, because in the computer there was installed fruity loops, and I used it like a game. but i soon started to try to reproduce what i listened in the radio, so, step by step, i started to learn how to use this softwer. After i started to play the keyboard, that I received like christmast gift. One day I listened to "Back to life" from Allevi, and I loved it so much that I started to play the piano, every day. Step by step i learned how to make music, and how music is made . So now i can use the softwer whereby I played whan i was a child to make my own music. What kind of music should I make? Simply the one that I like!</p> 

     <p>You can use my music for making non-commercial videos or projects, but please put the title of the song and the author in the description otf the video or in the credits of the video.</p> 

     <p>Commercial use of my music: by the PRO license, or contact me</p> 
    </div> 

</body>

body { 
font-family: 'Milonga', cursive; 
} 

#title { 
font-size:72pt; 
text-align:center; 
} 


#decal { 
float:left; 
width:50%; 
float:left; 
height:80%; 
} 

#image { 
margin-top:60%; 
} 

#about { 
font-size:24pt; 
float:left; 
width:50%; 
padding-top:5%; 
height:80%; 
}

fonte

2013-06-06 k.s

Potete fornire una demo online o crearne uno alla [JSFIDDLE] – farjam

@farjam lui è già pubblicato il suo codice , fai il violino da solo –

si prega di fare width tag img = 100%, che si adatta a decalcomania div anche su di ridimensionamento e aggiungere px all'altezza

<div id="decal"> 
    <div id="image"> 
     <img src="images/tree.png" alt="tree" width="100%" height="900px"> 
    </div>  
</div>

fonte

2013-06-06 04:51:26

Ecco il js fiddle link http://jsfiddle.net/XV3JM/ –

user2458195 ha ragione. Ma aggiungi larghezza a CSS invece di utilizzare l'attributo width.

Check this

Full Screen

CSS

* { 
    font-family:'Milonga', cursive; 
} 
#title { 
    font-size:72pt; 
    text-align:center; 
} 
#decal { 
    width:45%; /* changed to get some space btween #decal and #about */ 
    float:left; 
    height:80%; 
} 
#image { 
    margin-top:60%; 
} 

img { 
    width: 100% /* 100% of its parent ie, #decal*/ 
} 

#about { 
    font-size:24pt; 
    float:right; /* right to get some space */ 
    width:50%; /* try changing back to left n see what happens */ 
    padding-top:5%; 
    height:80%; 
}

fonte

2013-06-06 05:05:17 Sourabh

Grazie, che ha reso l'immagine smettere di sovrapporsi con il testo che è fantastico, ma l'immagine non rimane sempre in linea con la parte inferiore del testo quando ridimensiono la finestra del browser, c'è un modo in cui posso farlo accadere? Mi chiedo se abbia qualcosa a che fare con il padding-top perché l'immagine sia un%? –

@Sourabh è vicino. Ma sarebbe meglio usare display:inline-block anziché float e utilizzare vertical-align:bottom per allineare il fondo.

CSS

* { 
    font-family:'Milonga', cursive; 
} 
#title { 
    font-size:72pt; 
    text-align:center; 
} 
#decal { 
    font-size:24pt; /*Add this so that 1em is the same accross the divs*/ 
    padding-bottom:1em; /*Match the paragraph margin*/ 
    width:45%; 
    display:inline-block; 
    height:80%; 
    vertical-align:bottom; 
} 
#image { 
    margin-top:60%; 
} 

img { 
    width: 100% 
} 

#about { 
    font-size:24pt; 
    display:inline-block; 
    width:50%; 
    padding-top:5%; 
    height:80%; 
    vertical-align:bottom; 
}

Esempio: (? Http://jsfiddle.net/) http://jsfiddle.net/ajdQa/

fonte

2013-06-06 06:13:08

Bello! "Inline-block" non mi è venuto in mente. '+ 1' :) – Sourabh

@Sourabh' inline-block' è ora il mio go-now ora invece di float. Se non altro vuol dire no clearfixes –

Immagine In Linea Con Testo HTML CSS

risposta

Problemi correlati