Website Style Help

[prolemur]

I want to know how to style my HTML.

I'm going to have 4 tile type things on my webpage. Each one is kind of a little preview of the page it represents. I have drawn up some designs of how I'd like it to look.

 

I have tried doing this for a while and I don't know a good way to separate all these different section while maintaining proper structure of the elements.

 

Any tips of how to do this would be greatly appreciated. I want the boxes to be 500px wide btw.

[Hazy125]

Of course, the first solution to come to mind would be to use floats to do this. Here's an example of the first:

<style>#projects{	width: 500px;}#projects p{	float: left;	width: 372px;}.clear{	clear: both;}.leftImage{	float: left;}.rightImage{	float: right;}</style><div id="projects">	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>	<img class="rightImage" src="https://developer.chrome.com/webstore/images/mysteryicon.png" />	<div class="clear"></div>		<img class="leftImage" src="https://developer.chrome.com/webstore/images/mysteryicon.png" />	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>	<div class="clear"></div></div>

And of course, the accompanying fiddle: http://jsfiddle.net/0kdx1yv9/

 

Basically, create the container and float the images to one side. You put a float clear underneath the the set of image/text because floats are basically evil sometimes and it won't work unless you clear the float. There was a little bit of an issue I was having, that is, when I didn't specify a width for the p tags, the image would go underneath. So I set a width for the p tag(The images are 128x128 so 500-128 = p tag width) and that fixed that up. I don't know if that's enough to help you go do the rest of them, but give me a shout if you need a hand

[prolemur]

Thanks, I had no idea you needed to clear floats. That is sucky.

I know it working though because if I increase the width of the image or text by 1, it moves it to the next line

 

I should be able to get the second one since it's basically the same but flipped. Not too sure about the other, but I'm going to get to it

[Redliub]

UGH UGH UGH WTF IS THAT ALL THE NON PERPENDICULAR LINES EVERYWHERE AAAAGGGHHH PLEASE IT BURNS!

 

This kind of thing is very easy to setup using Bootstrap: http://getbootstrap.com

[prolemur]

UGH UGH UGH WTF IS THAT ALL THE NON PERPENDICULAR LINES EVERYWHERE AAAAGGGHHH PLEASE IT BURNS!

 

This kind of thing is very easy to setup using Bootstrap: http://getbootstrap.com

What do you mean non perpendicular lines, the ones in the diagram i made in ms paint?

 

For the time being I'm just trying to make each part of my website on my own. Such as no outside libraries

[Hazy125]

What do you mean non perpendicular lines, the ones in the diagram i made in ms paint?

 

For the time being I'm just trying to make each part of my website on my own. Such as no outside libraries

No jQuery  Do you hate yourself 

[prolemur]

No jQuery  Do you hate yourself 

I've never used it before, so I don't know :blink:

[Redliub]

For the time being I'm just trying to make each part of my website on my own. Such as no outside libraries

Bootstrap isn't cheating. It's immensely popular and it produces good looking stuff. You still have to work to make it look good. If you're doing stuff this complex I don't recommend starting from scratch without something like it.

 

Obviously the choice is yours but Bootstrap is definitely a good place to start for even the most experienced web designers. It makes it very easy to at least mock stuff up quickly and prototype ideas.

[prolemur]

Bootstrap isn't cheating. It's immensely popular and it produces good looking stuff. You still have to work to make it look good. If you're doing stuff this complex I don't recommend starting from scratch without something like it.

 

Obviously the choice is yours but Bootstrap is definitely a good place to start for even the most experienced web designers. It makes it very easy to at least mock stuff up quickly and prototype ideas.

Ya I'll check that out later, but right now I'm fine without it.

 

@Hazy125

 

I was having some trouble with the files one, but I think it's fine so long as I don't put in too much text or use images that are too tall.

 

* forgot to share with you guys: http://prolemur.com/wip/index.html

[Redliub]

I'm fine without it.

Well then you don't need this thread now, do you?

[prolemur]

Well then you don't need this thread now, do you?

B) deal with it B)

[Hazy125]

Ya I'll check that out later, but right now I'm fine without it.

 

@Hazy125

 

I was having some trouble with the files one, but I think it's fine so long as I don't put in too much text or use images that are too tall.

 

* forgot to share with you guys: http://prolemur.com/wip/index.html

I'm not entirely sure what's the problem with it... It not being the same height as the one next to it is offputting.. But you can just increase the height of the lemur to make that work, not sure why there's 3 images either...?

[prolemur]

I'm not entirely sure what's the problem with it... It not being the same height as the one next to it is offputting.. But you can just increase the height of the lemur to make that work, not sure why there's 3 images either...?

I just threw 3 pictures there, no real reason, just wanted it to be a similar size to the others.

[prolemur]

I am also wondering what the best way to assign the width and float of each tile. Right now each is declared separately which isn't very efficient.

[Hazy125]

I am also wondering what the best way to assign the width and float of each tile. Right now each is declared separately which isn't very efficient.

With your current setup you should be fine to give them all a similar class with width and float them all to the left, with a clear class under them of course. Although you may need to wrap all the tiles in a div with a width of 1000px to make sure it all remains centered

[prolemur]

With your current setup you should be fine to give them all a similar class with width and float them all to the left, with a clear class under them of course. Although you may need to wrap all the tiles in a div with a width of 1000px to make sure it all remains centered

Ok sounds good, they're already in a 1020px wide div.

[prolemur]

Well I feel accomplished

 

I just was re thinking how to do this before going to be and now it is much better. I don't have classes on all my images anymore like how you suggested. Instead I didn't change the layout of the html being paragraph,image,image,paragraph for tile 1 and tile 2. Now they use almost the same css, just tile 2 floats to the right and it looks just how I wanted to.

 

yay

http://prolemur.com/wip/style.css

http://prolemur.com/wip/index.html

 

Thanks for the help, you are always there for me hazy <3

[Hazy125]

-snip-

Looks pretty, but what happened to the other two tiles?!?!

[prolemur]

Looks pretty, but what happened to the other two tiles?!?!

Just removed them for now. They will still be in the final site.