basic template

[Annran Ruth]

Hi guys,
totally new to all this and have the following problem.
I need a basic responsive template for a long-form story that will allow me to use a full width image at the top and then have text 66% of the width below that. The text would be broken up with occasional images and at a couple of points I’d like to have the text area split in 2 with an image on the left and a large quote on the right.
I cant include any javascript other than that hosted on a cdn due to the cms i’m using.
Any help would be much appreciated,
Thanks
Annran

[Rohithzr]

hire a developer!

[Annran Ruth]

Thanks so much Rohithzr, it’s smart asses like you that make the rest of us glad the human race isn’t primarily made up of people like you.
Thanks again for nothing.

[Rohithzr]

@annran Ruth Were you hoping that someone here will actually sit and make a whole template for you. we can help but we cannot do the whole thing for you. The purpose a forum is to help and help is what you’ll get here

[Annran Ruth]

I was hoping someone might point me in the right direction. As a newbie I imagine what I need is a div at the top of the page to hold my image, another div to hold the text and a third that would hold an image and some text. 3 relatively simple elements that will repeat as needed down the page. I was trying to avoid potential pitfalls , hoping that someone might say “hey try this and see how it works for you ” but lucky me, I met you.

[Rohithzr]

@Annran Lucky You!
then lets see with the description you provided i think there is no need for a of nav bar so we’ll skip it.<br>
next we have your full width image so yes a div width:100% should do it an as a safe fail you should follow it with <div style="clear:both">

next is the main div saying width:66%; margin-left:17%; which will bring it to center of the page

then comes images …. big deal just place them and do a float:left or float:right depending on what you need.

then text portion (dont say text area as it is an element and hence can confuse someone) split into two: that would two divs inside main with a width:47% each and a float left an right respectively

enjoy coding ;)

[Annran Ruth]

See how easy it is to be nice. Thanks for the advice!

[Rohithzr]

don’t mention it.

[connorblikre]

hey try this and see how it works for you

[Rohithzr]

@annran I Guess i was wrong, some would actually make the template for you. :P @connorblikre nice one, that should be it for him

[Annran Ruth]

Hey, thanks a million

[Author]

Posts