I am completely new to web design and I just cant seem to accomplish what is in the picture below. Even if you could tell me what this layout is called so I could google for suggestions it would be great
Thanks in advance
Well, you could start with a container div. Then add in a 'box' div with a set width. if you float those divs to the left they will align as such in the container. Then you can add the framework for the items inside the boxes.
#container {
width:500px;
background-color:#CCC;
}
.box {
width:50%;
float:left;
min-height:120px;
}
.boximg {
// this is your icon for each box
width:20px;
float:left;
display:inline;
}
.boxtitle {
font-weight:bold;
float:left;
display:inline;
}
Then your HTML:
<div id="container">
<div class="box">
<div class="boximg"><img src=""/></div>
<span class="boxtitle">Here is your box title</span>
<p>Your box text here</p>
</div>
<!-- add more boxes here -->
</div>
This is just a general hint. For nice grid based designs, you can google for css frameworks.
Here are some sample pages:
http://www.blueprintcss.org/tests/parts/sample.html
http://elasticss.com/demos/Examples_Columns.html
http://960.gs/demo_24_col.html
It's the Leverage theme from ThemeTrust.
Related
Here is a prototype of what I am trying to implement
Here is what I currently have : JsFiddle
I am trying to get the picture of the guy on the laptop to align correctly with and to the right of the paragraph components - Business Traveller, Office Supply Purchases, etc...
What I've tried is using Align attribute, changing my img src code to
<img id="laptop" align="middle" src="zoom-39988392-3.JPG" height = "90" width ="90" />
but that didn't have any effect.
I also tried Float but that messed up my margins and the organization of my left components.
Is there a way I can do this without floating?
See the fiddle
The HTML and CSS that i've used is as follows. Used float:left
HTML
<div class="container">
<div id="choices">
<p class="choice">Business Traveller</p>
<p class="choice">Office Supply Purchases</p>
<p class="choice">Stay at home parent</p>
<p class="choice">Entertainment</p>
<p class="choice">Profile 6</p>
</div>
<div class="image"></div>
</div>
CSS
html, body, .container {
height:100%;
}
#choices {
width:30%;
float:left;
}
.choice {
margin-top:0px;
margin-left:20px;
text-align:center;
width:100%;
background-image: url("http://i.imgur.com/H43sVoi.png");
padding-top:15px;
padding-bottom:15px;
}
.image {
height:100%;
width:65%;
background-color:red;
float:left;
}
You will have to work with the height and width of each divs. I just made it roughly.
You have to create two columns. 1 column for the menu and the second column for the image. If you do this, you wont have trouble floating.
I have this current code:
CSS:
img
{
max-width:15vw;
max-height:15vh;
position:relative;
background-color:#67615d;
display:inline-block;
text-align:justify;
}
#container
{
width:80%;
min-height:100vh;
margin:0px;
float:right;
margin:0px;
overflow:hidden;
}
#navbar
{
background-color:#67615d;
width:20%;
height:100vh;
overflow:hidden;
position:fixed;
float:left;
}
#content
{
width:100vw;
min-height:100vh;
margin:0px;
padding:0px;
overflow:hidden;
background-color:#9d948f;
}
HTML:
<html>
<body>
<div id="content">
<div id="navbar">
*stuff in the navbar*
</div>
<div id="container">
</div><img src="pic1"></img>
</div><img src="pic2"></img>
</div><img src="pic3"></img>
</div>
</div>
</body>
</html>
Anyway, with this as my current code (add a few more things) and it looks like this:
http://i.imgur.com/9WTUNtj.jpg
These pics are just random screenshots and the others are random pictures (obviously just for testing purposes, the real thing will have pictures of all resolutions) I got off of google. Anyway, what I am trying to do is automatically adjust the pictures so that they all fit within the container while being different sizes.
http://i.stack.imgur.com/TQCwW.png
The black boxes are the "pictures", this is what I am trying to do but I keep messing up here and there, does anyone know how I would change my code to display the pictures as such?
Any advice or answers would be greatly appreciated :D!
Thanks :)
I would use a javascript masonry layout for this:
http://masonry.desandro.com/
Follow the docs and it's an easy install.
I'm currently updating a pretty old website (last update was around 2001), and have agreed to use HTML5 and CSS3.
For the general design, I'm working on a very clean white and gray tones style, with many paddings and margins. My problem resides in the home page: I'd like to have a 3-column centered layout. But where to start? I've tried some floating, but in vain.
Am I doing this right ?
HTML:
<div class="colwrapper">
<div class="ltcol"></div>
<div class="ctcol"></div>
<div class="rtcol"></div>
</div>
CSS:
.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; }
.ltcol { float:left; }
.ctcol { margin-left:340px; }
.rtcol { float:right; }
your css should be like this:
.ltcol, .ctcol { float:left; }
.rtcol { float:right; }
The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the flow in relation to other block elements. This allows naturally-flowing content to wrap around the floated element. This concept is similar to what you see every day in print literature, where photos and other graphic elements are aligned to one side while other content (usually text) flows naturally around the left- or right-aligned element.
For More details you must have to read this intresting article.
See This Demo: http://jsfiddle.net/akhurshid/YRWLV/
Your HTML is very clean - this is a great step forward.
You need to add a float: left to all the columns. To ensure the float is cancelled after your columns, it is best to add a clear div after the floated columns.
HTML:
<div class="colwrapper">
<div class="ltcol">Column 1</div>
<div class="ctcol">Column 2</div>
<div class="rtcol">Column 3</div>
<div class="clear"></div>
</div>
CSS:
.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; background-color: #efefef }
.ltcol { float:left; }
.ctcol { float:left; }
.rtcol { float:left; }
.clear { clear: left; }
So you add css3 tag for this questio so I suggest you to make this with css3 column layout:
More info
for example
HTML
<div class="colwrapper">
<div>text</div>
</div>
CSS
.colwrapper div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
It does not work on IE.
Use one of these tried and tested implementations instead of rolling out your own. In addition to the fact that you'll be getting tested and working code, you'll add responsiveness to your site with almost zero effort.
http://cssgrid.net/
http://960.gs/
http://framelessgrid.com/
http://goldengridsystem.com/
and lots more if you google..
could also use Flexbox property for this now as well so you don't need to worry about floats or clearfix's.
main{
/* .colwrapper{ */
display: flex;
flex-flow: row;
justify-content: center;
}
main > section{
/* .ltcol,.ctcol,.rtcol{ */
display:flex;
flex-flow:column;
align-items:center;
padding:10px; padding:.625rem;
}
main > section:nth-child(2){
/* .ctcol{ */
margin:0 20px; margin:0 1.25rem;
}
http://caniuse.com/flexbox shows the support for it isn't quite as far along as you would probably like, however, there are ways to improve support by mixing old versions of the syntax with the new http://css-tricks.com/using-flexbox/ has a great write up on it from Chris Coyier if you want to play with this for a next project (this post is fairly old). You can also get more details at http://html5please.com/#flexbox
Also, if you're using HTML5 I'd probably go with sections over divs for a more semantic structure, so a comparison would look something like this:
<main>
<section></section><!-- or <nav></nav> -->
<section></section><!-- or <article></article> -->
<section></section><!-- or <aside></aside> -->
</main>
instead of...
<div class="colwrapper">
<div class="ltcol"></div>
<div class="ctcol"></div>
<div class="rtcol"></div>
</div>
Just try putting the rtcol div beofre le ltcol div.
<div class="colwrapper">
<div class="rtcol">X</div>
<div class="ltcol">X</div>
<div class="ctcol">X</div>
</div>
http://jsfiddle.net/EDjpy/
Morning,
I have the following HTML:
<div id="sah_padding">
<div id="sah_holder">
<div id="sah_name">Hello [agent_name]</div>
<div id="sah_logout">✖</div>
</div>
You are working with [customer_name]
</div>
and I have the following CSS:
#sah_padding{
padding:10px 10px 10px 10px;
}
#sah_holder{
padding-bottom:10px;
clear:both;
}
#sah_name{
float:left;
width:50%;
}
#sah_logout{
text-align:right;
}
#logout_link{
color:#fff;
text-decoration:none;
font-weight:bold;
}
However my login link and Hello message aren't aligning correctly, the logout link is a few pixels below the hello message and I need them to be on the same horizontal line. What am I doing wrong?
if you set line-height :1 to #logout_link element, it should correct the alignment
(of course feel free to choose a different value to adjust it)
Give float to your #sah_logout also. Write like this:
#sah_logout{
float: left;
text-align:right;
}
Check this http://jsfiddle.net/QUNT2/
Check the line-height of your elements!!!
You need to set a float to #sah_logout as well:
#sah_logout{
float: left;
text-align:right;
}
You can even make it say, float: right. It's entirely your choice. Doing only a text-align: right will modify how the inner contents of the container behave, not how the div behaves within the flow.
Also, you might have a few problems with the parent div not wrapping correctly around the children divs (as all children now have float properties), so you might need to add another div, with clear: both set in its style:
<div id="sah_holder">
<div id="sah_name">Hello [agent_name]</div>
<div id="sah_logout">✖</div>
<div style="clear: both"></div>
</div>
Instead of wasting time with block level elements why don't you simply use inline elements for both the "Hello" text and the logout link? That's what inline elements are supposed to do - stay in line with each other.
<div id="sah_padding">
<div id="sah_holder">
<span id="sah_name">Hello [agent_name]</span>✖
</div>
<span>You are working with [customer_name]</span>
</div>
Its is highly unlikely that you would need any of the CSS code you previously used for elements inside sah_holder unless you want to style them differently.
check it your updated html :-
<div id="sah_padding">
<div id="sah_holder">
<div id="sah_name">Hello [agent_name]</div>
<div id="sah_logout">You are working with [customer_name]</div>
</div>
</div>
your updated css:-
#sah_padding{
padding:10px 10px 10px 10px;
}
#sah_holder{
padding-bottom:10px;
border:1px solid red;
overflow:hidden;
}
#sah_name{
float:left;
width:50%;
}
#sah_logout{
float:right;
}
.logout_link{
color:black;
text-decoration:none;
font-weight:bold;
}
or you can see the demo:- http://jsfiddle.net/WnecH/11/
Hi Stackoverflow users...
I have this website I'm trying to style really cool.
http://kebax.dk/blog
As you see my problem is that the last part of the "border" does not cover the last two div's.
Here's the structure of the Div's:
<div id="blog">
<div id="bloghead">
#Blog headline
</div>
<div id="blogbody">
<p>Test tekst!!</p>
<p>Test tekst!!</p>
<p>Test tekst!!</p>
<p>Test tekst!!</p>
<p>Test tekst!!</p>
<p>Test tekst!!</p>
</div>
<div id="blogcreditsleft">
Written by: Kristian
</div>
<div id="blogcreditsright"><?php echo date("Y-m-d") ?></div>
</div>
And here's the CSS behind it (you can also just check out my stylesheet too):
#blog {
.rounded();
left:65px;
position:relative;
width:520px;
margin-left:auto;
margin-right:auto;
padding:5px;
background:#052507;
}
#bloghead {
color:#000000;
background:#2BAC2B;
padding:5px;
border-bottom:1px solid #052507;
font-size:14pt;
}
#blogbody {
color:#000000;
background:#42E64F;
padding:5px;
height:auto;
overflow:auto;
min-height:300px;
}
#blogcreditsleft, #blogcreditsright {
color:#000000;
padding:5px;
width:250px;
.gradientVBottomCenter();
}
#blogcreditsleft {
float:left;
}
#blogcreditsright {
float:right;
text-align:right;
}
Only way I can make it work is by setting the position:absolute and adding left:65px to push it into center of my "center" :)
But then my problem is that when more blog elements are added they won't just be under each other, because of the absolute position.
I suspect it's something about a missing clear:both, but I have no idea how to fix it though...
Can anyone help?
Edit:
I had to stare at your site for almost a full minute to understand what you were talking about, and I suspect others are doing the same. That border is quite subtle (easy to miss).
The easiest way to fix it is to add overflow: hidden to #blog to "clear the float".
(Or overflow: auto, but past experience has taught me more upvotes go to hidden)
Your floating elements are escaping the container div.
Add one more block level element to the markup after the "blogcreditsright".
<div class='clear'></div>
css
.clear{
clear:both;
}