Jump to content

Move a Image inside a DIV


Recommended Posts

Hi Guys

Im trying to move an image to the top left corner  inside a div, but it doesnt' works. Can anyone Help?

Thanks 

cheers

Ricardo

HTML

    <div id="content">
            <h2>Herzlich Willkommen!<br>
                    <br>
                </></h2>
            <img class="float" src="images\home1.jpg"/>
            <h3>Der Sommer kann kommen...!</h3>
            <p>Die Kartoffeln sind bereits gepflanzt und auch sonst spürt die Natur den Frühling: Alles wächst und gedeiht, sowohl die gewünschten Arten wie auch das Unkraut. Doch dank vielen tüchtigen Händen können wir Ihnen wie gewohnt, jeden Samstag morgen von 7 bis 12 Uhr frischen Biogemüse am Aarauer Wochenmarkt anbieten. Doch nicht nur das, auch knuspriges Brot, Wurstwaren aller Art, Käse und vieles mehr wartet auf Sie! Selbstverständlich sind all unsere Produkte aus eigener Produktion und aus biologischem Anbau. 
            Die Setzlinge für den Setzlingsmarkt am 6. und 7. April auf dem Schloss Wildegg wachsen und warten bald auf ihren neuen Besitzer.</p>
                <br>
            <h3>Aktuell</h3>
            <p>Bereits erhalten Sie bei uns die ersten Sommersalate. Ab Ende April verkaufen wir wieder Gemüse- und Blumensetzlinge aller Art, pünktlich zum Beginn der Pflanzsaison!</p>    

 

 

CSS

#content img.float{
        float: left;
        margin-right: 15px;
        border: 1Px solid #111111;

}


                

Link to post
Share on other sites

Simple answer, move the image before header OR before text in header. The image won't move up to top left, because the block header element will prevent it doing so as by default it fills the whole width available to it, forcing following floated or non floated elements below it.

Link to post
Share on other sites

Hmm.. Now the picture is on the Right Place, but I had text inside the Same div, on the right side from the Picture. Now the last 2 Lines are under the image.

I think its Better when i place 2 Divs inside a Container. What do you think? 

P.S - I don't know becaus i can't upload a Screenshot. Im only alowed tu upload Documents with a max size of 0.01MB. :-(

Edited by ricardo_t
Link to post
Share on other sites

It might be easy to maintain and control with 2 div container element, although this works.

<!DOCTYPE html>
<html>
<head>
<style>
 #content img.float{
        float: left;
        margin-right: 15px;
        border: 1Px solid #111111;
        width:20%;

} 
img.float ~ h3 ~ p{overflow:auto;}
</style>
</head>
<body>

<div id="content">
            <img class="float" src="pulpitrock.jpg"/>
            <h2>Herzlich Willkommen!</h2>
            
            <h3>Der Sommer kann kommen...!</h3>
            <p>Die Kartoffeln sind bereits gepflanzt und auch sonst spürt die Natur den Frühling: Alles wächst und gedeiht, sowohl die gewünschten Arten wie auch das Unkraut. Doch dank vielen tüchtigen Händen können wir Ihnen wie gewohnt, jeden Samstag morgen von 7 bis 12 Uhr frischen Biogemüse am Aarauer Wochenmarkt anbieten. Doch nicht nur das, auch knuspriges Brot, Wurstwaren aller Art, Käse und vieles mehr wartet auf Sie! Selbstverständlich sind all unsere Produkte aus eigener Produktion und aus biologischem Anbau. 
            Die Setzlinge für den Setzlingsmarkt am 6. und 7. April auf dem Schloss Wildegg wachsen und warten bald auf ihren neuen Besitzer.</p>
               <!--<img class="float" src="pulpitrock.jpg"/>-->
            <h3>Aktuell</h3>
            <p>Bereits erhalten Sie bei uns die ersten Sommersalate. Ab Ende April verkaufen wir wieder Gemüse- und Blumensetzlinge aller Art, pünktlich zum Beginn der Pflanzsaison!</p>     
</div>
</body>
</html>

 

Link to post
Share on other sites

Is it not possible to change your position to relative? Like I did here for my header image:
 

#header_home {
    background-image: url(images/header.png);
    background-repeat:inherit;
    width: 100%;
    height: 200px;
    width: 600px;
    position: relative;
    top: -5px;
	border-radius: 8px;
}

 

Link to post
Share on other sites

Its not a background image, using position: relative with property top: -5; is a bad idea, as using this causes the area occupied by this element to be 5px more vertically, it will be like adding 5px margin at the bottom, with elements below it not occupying this area to fill empty space as they normally would.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...