dauruk0512 Posted June 19, 2015 Share Posted June 19, 2015 (edited) Hello i'm really new at design i have been trying to make images look like this image i uploaded but don't know what position exactly everty time i make float:left the bot image and pargraf give me wrong position, any answer will apreciatte here is my code http://codepen.io/anon/pen/yNzMMe Freddy Edited June 19, 2015 by dauruk0512 Link to comment Share on other sites More sharing options...
dsonesuk Posted June 19, 2015 Share Posted June 19, 2015 Place image AFTER first paragraph, and remove position: absolute; from container. Link to comment Share on other sites More sharing options...
Alatoru Posted June 19, 2015 Share Posted June 19, 2015 Move the image into some paragraph you want to be in, and remove margin-top:200px. Let's assume you want image to be set into second paragraph, place it here, place your img tag inside paragraph and remove margin top. That way, the image and the text will merge perfectly. Link to comment Share on other sites More sharing options...
dauruk0512 Posted June 19, 2015 Author Share Posted June 19, 2015 Hi @dsonesuk and Alatoru i make the demo like that cause i need to show came from database, how can i move the images when i have table which store data, look this is my table for example image, artikel so here i show in table use php <!----field artikel show all pargraph cause type text in table----><?php echo $row->artikel ?><img src="uploads/<?php echo $row->image?>"> so i make simple demo like above to make same conditions with my table, Thanks for respond Freddy Link to comment Share on other sites More sharing options...
Alatoru Posted June 19, 2015 Share Posted June 19, 2015 It does not stop you to use html inside your php. You can nest image tag to be echoed just as your paragraph from database. 1 Link to comment Share on other sites More sharing options...
dauruk0512 Posted June 19, 2015 Author Share Posted June 19, 2015 can you show your logic code, Thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted June 19, 2015 Share Posted June 19, 2015 You will have to insert the image html within the paragraph retrieved from database table field OR insert a identifying string to do a str_replace() on <?php $converted = ""; $img_from_DB = '<img src="http://placehold.it/350x150">'; $content_from_DB = "<p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p> <p>#image01_goes_here#This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p> <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p> <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>"; $converted = str_replace('#image01_goes_here#', $img_from_DB, $content_from_DB);?> <div id="container"> <?php echo $converted; ?> </div> Where '#image01_goes_here#' is the target string to replace with image OR target specific number of paragraphs within table field and replace opening 2nd paragraph with a paragraph tag but include the img html from database table field. <?php $img_from_DB = '<img src="http://placehold.it/350x150">'; $content_from_DB = "<p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p> <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p> <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p> <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>"; $count = 1; $converted = ""; for ($i = 0; $i <= strlen($content_from_DB); $i++) { if (substr($content_from_DB, $i, 3) === "<p>") { if ($count === 2) { //count of paragraphs = 2 $converted = substr_replace($content_from_DB, '<p>' . $img_from_DB, $i, 3); break; } $count++; } } ?> <div id="container"> <?php echo $converted; ?> </div> 1 Link to comment Share on other sites More sharing options...
dauruk0512 Posted June 19, 2015 Author Share Posted June 19, 2015 great logic use it #image01_goes_here# But let me describe first what i reall need mr ,first there 2 input type one is textarea which artikel then upload image, if your logic above i understand but we need to post then insert to table, how can i mix add this into artikel post here is my post $artikel=$_POST['artikel'];$image= nama file image; it hard to do for me addd up the image inside artikel, can i just use this http://codepen.io/anon/pen/yNzMMe only modify css file ! i don't mean force cause i need the easy way in css, thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted June 19, 2015 Share Posted June 19, 2015 css is presentational, its not for manipulation like you would get with PHP or JavaScript. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 19, 2015 Share Posted June 19, 2015 (edited) how can i mix add this into artikel post here is my post Unless user puts in the image identifier text, so it appears in $_POST['artikel']; you can use str_replace, else you would have to use the other, but then it would always add to second paragraph if found. Edited June 19, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
dauruk0512 Posted June 20, 2015 Author Share Posted June 20, 2015 Hi again so the best way for me is force user when input artikel also input the #image01_goes_here# is it possible to handle it by css, thanks ! Link to comment Share on other sites More sharing options...
dsonesuk Posted June 20, 2015 Share Posted June 20, 2015 (edited) If you feel that the user would be happy to insert the image placement string CORRECTLY spelled and placed, then yes it probably would be the best option. But personally i would place image at top and leave it as that. is it possible to handle it by css, thanks !Answered this already post#9 Edited June 20, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
dauruk0512 Posted June 20, 2015 Author Share Posted June 20, 2015 (edited) Answered this already post#9 What do you mean ? where is the answer still figure out how to handle this by css, Yes me too i will put the images in the top and leave as it but my boss ask me to put like that ? Edited June 20, 2015 by dauruk0512 Link to comment Share on other sites More sharing options...
dsonesuk Posted June 20, 2015 Share Posted June 20, 2015 (edited) LOOK the php examples I gave are MANIPULATION OF CODE, NOW! read post #9 again! more slowly. Edited June 20, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
dauruk0512 Posted June 20, 2015 Author Share Posted June 20, 2015 Place image AFTER first paragraph, and remove position: absolute; from container. This ? Link to comment Share on other sites More sharing options...
dsonesuk Posted June 20, 2015 Share Posted June 20, 2015 Sorry! post#9 Link to comment Share on other sites More sharing options...
dauruk0512 Posted June 22, 2015 Author Share Posted June 22, 2015 Thanks admin, so much thanks will applicated to my projects now ! huh Thanks Link to comment Share on other sites More sharing options...
dauruk0512 Posted June 23, 2015 Author Share Posted June 23, 2015 Hai again last question, really here is my code $image_path = base_url()."uploads/testimoni";$image=$row->tes_beforeafter; $img_from_DB ="<img src='$image_path/$image'>"; $content_from_DB =$row->tes_des; i'm trying to take substr in this $content_from_DB =$row->tes_des; to be like $content_from_DB =substr($row->tes_des, 0, 250) give me blank also but when i didn't give substr it working well, Thanks a lot ! Freddy Link to comment Share on other sites More sharing options...
dsonesuk Posted June 23, 2015 Share Posted June 23, 2015 So you want first 250 characters (including any html tags), are there 250 characters?, and if you retrieve partial html tags, and html tags that are not closed cause the closing tags are outside 250 limit then what are you going to do? Link to comment Share on other sites More sharing options...
dauruk0512 Posted June 24, 2015 Author Share Posted June 24, 2015 No i mean not in the 250 characters please go to this link bro http://pingsari.earworks.co.id/ Look at the images foot, Honestly i want make such as readmore so why i should show all paragraph in other side i make this read more, so it such as uselees for me, Thanks for your respon Freddy Link to comment Share on other sites More sharing options...
dsonesuk Posted June 24, 2015 Share Posted June 24, 2015 No! Totally lost on what you want with this code? Link to comment Share on other sites More sharing options...
dauruk0512 Posted June 25, 2015 Author Share Posted June 25, 2015 Thanks for you nice respond Realize that it doesn't matter, Thanks A lot 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