The links don't change the "holder" height at all, really I don't know what is wrong
HTML:
<div id="holder">
<a class="button" href="#"><span>home</span></a>
<a class="button" href="#"><span>example</span></a>
<a class="button" href="#"><span>another examp.</span></a>
<a class="button" href="#"><span>hello</span></a>
<a class="button" href="#"><span>abc</span></a>
</div>
CSS:
*{
margin:0;
padding:0;
}
#holder{
width:100%;
background: #000;
border: 1px solid red;
}
.button {
color: #444;
display: block;
float: left;
height: 24px;
margin-right: 6px;
padding-right: 18px;
}
.button span {
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
.button:hover {
background: #333 url('./images/bg_button_a.jpg') no-repeat scroll top right;
outline: none;
}
.button:hover span {
background: #333 url('./images/bg_button_span.jpg') no-repeat;
}
Elements do not automatically expand to contain floated descendents.
Adding overflow: hidden is one type of clearfix and so long as you don't mind elements being clipped at the element's bounding box, the easiest.
#holder {
overflow: hidden;
}
Further Reading.
It's because they are float:left, such subelements don't expand the dimensions of their parent.
Easiest way to counteract this is to add
<div style="clear:both;"></div>
at the end of the children. E.g:
<div id="holder">
<a class="button" href="#"><span>home</span></a>
<a class="button" href="#"><span>example</span></a>
<a class="button" href="#"><span>another examp.</span></a>
<a class="button" href="#"><span>hello</span></a>
<a class="button" href="#"><span>abc</span></a>
<div style="clear:both;"></div>
</div>
Opening span but closing li could cause some trouble.
<a class="button" href="#"><span>hello</li></a>
Floated elements to not extend the height of their container. Essentially, they are all bound to the top of the container (which visually is not the case).
Use a div with clear:left at the bottom of the container to expand it to contain the floated elements.
Floated elements do not count towards the height of their parent.
Setting overflow: hidden; on #holder is a neat trick to rectify that.
Related
The elements of the web page I'm building move around when I want them to stay in place. If the line beginning "This is a Beta version" changes length, the 4 menu items (translucent gray rectangles) shift: If I shorten the bottom line, the menu items move to the right; if I lengthen it, the menu items move left.
How can I arrange things so that the width of one element won't change the horizontal position of other elements that are stacked vertically with it?
You can view the page at http://apdamien.info/nfair/GH/demo/mainmenu.html
Here is what I think is the relevant sections of the code:
CSS:
#mainmenu {
width: 350px;
padding-bottom: 14px;
margin-right: 60px;
}
#maindiv {
background: url(imgs/smalltown.jpg) no-repeat;
}
.menu-entry {
display: block;
cursor: default;
color: #fff;
width: 100%;
height: 39px;
padding-top: 13px;
font-size: 20px;
font-weight: bold;
font-family: Univers,sans-serif;
text-transform: uppercase;
margin-bottom: 19px;
margin-left: 8em;
border: 2px solid black;
text-align: center;
background: rgba(96,96,96,0.65);
text-decoration: none;
text-transform: uppercase;
}
.menu-entry:hover {
background: rgba(0,0,0,0.5);
}
And the relevant chunk of HTML:
<body>
<div id="maindiv">
<div id="titleauth">
<div id="title"><img alt="Demo Game" src="imgs/title.svg"/></div>
<div id="author"><a href="http://www.apdamien.info"
target="_blank"><img alt="A. P. Damien" src="imgs/author.svg"/></a>
</div>
</div>
<div id="lowerleft">
<div id="mainmenu">
<a class="menu-entry" href="game.html">New Game</a>
<a class="menu-entry" href="helpmain.html">How to Play</a>
<a class="menu-entry" href="restore.html">Restore Saved Game</a>
<a class="menu-entry" href="credits.html">Credits</a>
</div>
<div id="bottom-line">
<img alt="Beta version warning" src="imgs/beta.svg" />
</div>
</div>
</div>
</body>
Both #mainmenu and #bottom-line are positioned relative to the left-hand side of #lowerleft. If you want to have them positioned relative to the right-hand side, you'll need to float all children to the right. You'll also want to use clear: both, so that the children won't sit next to each other.
#lowerleft * {
float: right;
clear: both;
}
Using the above on your live site allows me to adjust the width of #bottom-line without affecting the postion of #mainmenu, so this should hopefully work for you :)
Note that this shifts the menu slightly to the right. If you want to move the main menu back to its original position, you can increase its margin-right value. It would have had no effect on the menu previously, though the addition of float: right also fixes that ;)
I think I'm going insane over this now, no idea how to resolve it... please help guys.
I have three divs on a page that should all fit onto one line. They have to be square (with rounded corners) so I have to set a width and a height to keep the 1:1 aspect ratio. I have a heading inside them that should be vertically and horizontally centered. The wording of the heading may change and might run over 2 lines so a simple margin-top is not enough in this case.
First problem: there are weird margins at the top despite there not being anything else affecting that (well there must be but I can't see what). If I float the divs they line up but floating isn't the way to go is it... why is inline-block not working?
Second issue (which is likely related, so I'm posting it in one go) is that I'm unable to vertically center the title divs. Any ideas?
Here's a jsfiddle to illustrate: http://jsfiddle.net/fydC4/
The HTML:
<div id="container">
<div class="nav-left">
<p id="nav-left-title">In this section…</p>
<ul>
<li><a class="light" href="#">page title here</a></li>
<li><a class="light" href="#">page title here</a></li>
<li><a class="light" href="#">page title here</a></li>
</ul>
</div>
<div id="main">
<h1>Assignments</h1>
<p>Click on the titles of the assignments to find out more.</p>
<div class="box" id="good-designs">
<h2 class="box">3 good designs</h2>
</div>
<div class="box" id="temp">
<h2 class="box">title here</h2>
</div>
<div class="box" id="temp2">
<h2 class="box">title here</h2>
</div>
</div><!--end main-->
</div>
</div><!--end container-->
The CSS:
#container {
max-width: 960px;
margin: auto;
}
#main {
display: table-cell;
width: 73em;
padding: 1em 2em 2em;
background-color: white;
}
#nav-left-title {
padding-bottom: 0.5em;
margin: 0;
color: white;
}
.nav-left{
display: table-cell;
width: 14em;
background-color: #87a8b1;
padding: 1.1em;
font-size: 1.2em;
}
.nav-left li {
padding: 0.5em 0;
border-bottom: 1px solid white;
}
h2.box {
padding: 15px 0;
margin: 50% 15px;
margin: auto;
text-transform: uppercase;
text-align: center;
}
div.box {
padding: 15px;
height: 180px;
width: 180px;
border-radius: 50%;
margin-top: 25px;
margin-left: 1.5em;
display:inline-block;
/* float: left; */
}
#good-designs {
background-color: green;
}
#temp, #temp2 {
background-color: yellow;
}
Hi you may use two properties to align all your elements
vertical-align:middle;
display:inline-table on div.box and
display:table-cell on h2.box; (for the texts inside your divs)
Check this code http://jsfiddle.net/fydC4/16/
This worked for me, replace inline-block with float left.
you are also calling margins twice on some element which are not necessary
here you go
jsfiddle.net/fydC4/14
I have a div called Buttons with 100% width inside a floating sidebar. The sidebar has 30% width.
Inside the div Buttons I have four links with background-images. I want to center the four links inside the div, but they must spread (all have the same margin, but the left one should be completely left and the right one completely right). But: it should also work inside my Responsive website. So if I resize my window, they must also be centered. That is why I can't set margins in pixels.
Please help me!
Sorry for my English.
[EDIT: My code]:
HTML:
<div id="sidebar">
<div id="buttons">
<a id="twitter" href="http://www.twitter.com" title="Twitter" target="_blank"></a>
<a id="facebook" href="http://www.facebook.com" title="Facebook" target="_blank"></a>
<a id="rss" href="rss.php" title="RSS" target="_blank"></a>
<a id="youtube" href="http://www.youtube.come" title="YouTube" target="_blank"></a>
</div>
</div>
CSS:
#sidebar{
float:right;
width:30%;
text-align:center;
}
#buttons{
width:100%;
}
#twitter,#facebook,#rss,#youtube{
height:40px;
display: inline-block;
margin-top:20px;
}
#twitter{width:40px;}
#twitter{background:url('/images/icons.png') 0 0;}
#facebook{width:40px;}
#facebook{background:url('/images/icons.png') -40px 0;}
#rss{width:40px;}
#rss{background:url('/images/icons.png') -80px 0;}
#youtube{width:40px;}
#youtube{background:url('/images/icons.png') -120px 0;}
Seeing your code would definitely help, but I'm guessing you're looking for something like this:
--edit--
Okay so it looks like we need to position these buttons absolutely, so try:
#buttons {
position: relative;
min-height: 40px;
}
#buttons > a {
position: absolute;
width: 40px;
height: 40px;
}
a#twitter { background: red; left: 0px; }
a#facebook { background: orange; left: 36%; margin-left: -20px; }
a#rss { background: yellow; left: 64%; margin-left: -20px; }
a#youtube { background: green; right: 0px;}
Aaand fiddle: http://jsfiddle.net/ttjAW/9/
You might need to adjust the left percentages because the buttons have fixed widths (its hard to do this using fixed and variable width elements...) I then applied a negative margin of half of the buttons width to centre them.
Does this do what you needed?
Use text-align: justify on your #buttons element to center the button elements perfectly and allow them to expand responsively within the space.
Add text-align: justify on your #buttons element
Add a #buttons:after pseudo element with 100% width to force the buttons to fill the entire sidebar
Here's a working example on JSbin.
And here's the code for your situation:
HTML:
<div id="sidebar">
<div id="buttons">
<a id="twitter" href="#">1</a>
<a id="facebook" href="#">2</a>
<a id="rss" href="#">3</a>
<a id="youtube" href="#">4</a>
</div>
</div>
CSS:
#buttons {
text-align: justify;
width: 100%;
}
#buttons:after {
content: '';
display: inline-block;
width: 100%;
}
#buttons a {
display: inline-block;
height: 40px;
width: 40px;
}
This method is more fully documented here: http://www.barrelny.com/blog/text-align-justify-and-rwd/
I have the following HTML:
<div class="mega_parent">
<div class="parent">
<div class="holder">
<span class="holder_under">Left heading</span>
<div class="holder_options">
<span class="holder_options_1">Option 1</span>
<span class="holder_options_2">Option 2</span>
<span class="holder_options_3">Option 3</span>
</div>
</div>
</div>
</div>
and the following CSS:
.holder {
background-color: blue;
padding: 10px;
}
.holder_under {
padding-left: 10px;
font-size: 16px;
color: #999;
}
.parent {
float: left;
margin-right: 20px;
width: 600px;
}
.mega_parent {
background-color: blue;
margin: 130px auto;
min-height: 320px;
height: 100% auto;
overflow: auto;
width: 940px;
padding: 0px 10px;
}
Question:
How do I make the div with the class holder_options align in the same line as the span with the class .holder_under?
Here's what it looks like currently in jsFiddle.
Div's are by default block level elements. Please read up more about block level elements here.
"Block level elements - Their most significant characteristic is that they typically are
formatted with a line break before and after the element (thereby
creating a stand-alone block of content)."
Set it to display:inline-block;
.holder_options {
display:inline-block;
}
Working jsFiddle here.
by default div's are display:block which is set to take 100% of the width. set it to display:inline or display:inline-block to take only what it needs and allow others to fit on the same line
u need inline-block
This is where the magic value inline-block for the display property comes into play. Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc
css
.holder {
background-color: blue;
padding: 10px;
}
.holder_under {
padding-left: 10px;
font-size: 16px;
color: #999;
}
.holder_options {
display:inline-block;
}
html
<div class="holder">
<span class="holder_under">Left heading</span>
<div class="holder_options">
<span class="holder_options_1">Option 1</span> </div>
.holder_options
{
float:right;
}
Here's the JS Bin: http://jsbin.com/idilim/1/
Yes the structure you have laid out is not done well however, just float .holder_options to the left:
.holder_options {
float: left;
}
As Morpheus stated in a comment, style="display: inline;" should do it.
<div class="holder">
<span class="holder_under">Left heading</span>
<div class="holder_options" style="display: inline;">
<span class="holder_options_1">Option 1</span>
</div>
</div>
I have a link outside a div like in the following example:
<a href="http://google.com">
<div id="Something" style="width:200px; height:100px; display:block; background-color:red; padding:0; margin:0;">
</div>
</a>
Now, the link does work on any part of the div, but it is also present outside the div, mainly to the right side of it where there isn't anything. How can I fix this to make the link only work inside the div tag?
Here's the code in jsfiddle: http://jsfiddle.net/BWPHS/
Note, DIV elements are display: block by default, so you don't need that in the DIV. What you do need to do is make the A the same height, and resolve the padding and margin to taste.
<div id="Something" style="width:200px; height:100px; background-color:red; padding:0; margin:0;">
</div>
http://jsfiddle.net/BWPHS/3/
Note, as sdleihssirc notes, HTML5 does allow it (if you use the DOCTYPE). Note, to resolve the specific issue for HTML5, you would need to apply the height and width to the A tag:
<a href="http://google.com" style="width: 200px; height: 100px; display:block; padding: 0; margin: 0; background: blue;">
<div id="Something" style="height: 100px; background-color: red; padding:0; margin:0;"></div>
</a>
http://jsfiddle.net/BWPHS/2/
And, as thirtydot points out, you can display: inline-block or float: left the #something element and apply display: block to the A and it should work perfectly for you:
#something,
#something a {
padding: 0;
margin: 0;
}
#something {
display: inline-block;
background: red;
}
#something a:link {
display: block;
width: 200px;
height: 100px;
}
<div id="something">
</div>
http://jsfiddle.net/BWPHS/6/
And you probably want to try to avoid using inline style attributes.