ricardo_t Posted March 7, 2018 Share Posted March 7, 2018 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 comment Share on other sites More sharing options...
dsonesuk Posted March 7, 2018 Share Posted March 7, 2018 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 comment Share on other sites More sharing options...
ricardo_t Posted March 7, 2018 Author Share Posted March 7, 2018 (edited) 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 March 7, 2018 by ricardo_t Link to comment Share on other sites More sharing options...
dsonesuk Posted March 7, 2018 Share Posted March 7, 2018 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 comment Share on other sites More sharing options...
rob.crusnik Posted March 8, 2018 Share Posted March 8, 2018 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 comment Share on other sites More sharing options...
dsonesuk Posted March 8, 2018 Share Posted March 8, 2018 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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now