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;
}
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 having a bit of trouble getting a unordered list of items to change its parents size.
I have something like this
HTML
<div class="content">
<div id="product-range">
<ul>
<div class="product-container">sup</div>
<div class="product-container">sup</div>
<div class="product-container">sup</div>
<div class="product-container">sup</div>
<div class="product-container">sup</div>
</ul>
</div>
</div>
CSS
.content {
position:relative;
background:white;
max-width:1299px;
margin: 0 auto;
padding:0;
}
#product-range {
position:relative;
margin-left:25px;
margin-right:15px;
background:blue;
}
.product-container {
position:relative;
width:398px;
height:500px;
float:left;
margin-right:20px;
margin-top:15px;
background:green;
}
Which results in
http://jsfiddle.net/qfUTq/
The parent collapses into nothing. The only way I've been able to get around this is to add an empty div with a clear:both like this:
http://jsfiddle.net/eE6XQ/
Is there a proper way to go about doing this? I've tried to add that same property to all the other classes or ID and it doesn't produce the same effect.
On #product-range
play with overflow property :auto,scroll,...;
i guess overflow:auto cant solve your problem but its not the best way to do so.
Apply overflow: hidden to #product-range and it will wrap around the elements.
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/
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.