Cheers, I'm making a horizontal link menu.
I made parent div height 46px and would like to achieve anchor padding with 46px height in total.
How do I do that?
<div class="outside">
FCC
</div>
I'd like the green rectangle to fit inside parent div :)
.outside{
width:100%;
height:46px;
background-color:red;
}
.outside a{
float:left;
text-decoration:none;
background-color:green;
padding-top:15px;
padding-bottom:15px;
font-size:16px;
}
There were some similiar questions but none of them included padding (which can be pretty complicated to calculate).
http://jsfiddle.net/T2Nqd/
Note: I'd like the link to stay centered inside padding and to be able too keep his width about 200px or so
Try this
.outside a {
float: left;
padding: 13px 0px;
text-decoration: none;
background-color: green;
font-size: 16px;
}
You may add code of css like this
.outside a{
line-height: 16px;
}
Because the fonts's hight is not only 16px, so padding + fonts'height > 46px, so you just to set line-height to solve this question.
Related
so im currently stuck on my footer of the website i am making. I am not sure as to why the footer background does not fit to the sides and bottom of the page, any help ? Thanks for your time.
http://codepen.io/anon/pen/GgMGvY
.footer {
background-color: #5a5a5a;
margin-top:30px;
padding-top:30px;
}
.bottom-footer {
border-top:1px solid #b2b2b2;
margin-top:10px;
padding-top:10px;
color:#b2b2b2;
}
.footer-nav {
text-align:right;
list-style:none;
}
.footer-nav li {
padding:0px 10px;
display:inline;
}
Your .offer class has padding: 50px set. This is why your footer is not extending to the sides of the browser window. - answered
Your .offer class has padding: 50px set. This is why your footer is not extending to the sides of the browser window.
The reason why your footer does not extend to the side is that it was inside another div .offer which has a padding of 50px. Try setting it to 0.
Your .offer class has padding: 50px set. This is why your footer is not extending to the sides of the browser window. - ANSWERED
I'll start by saying that my css skills are very weak.
Here is the site, and I was trying to add some margins to this background so I can see all the content. I now understand that I am not able to use margins on a background, so what are my options here?
Here is my HTML
<body>
<div id="container">
<nav id="navigation">
<ul>
<li>Homepage</li>
</ul>
</nav>
</div>
</body>
and here is my css
body {
background: url('images/prices.jpg');
min-height: 100%;
height: 100%;
}
#btn {
color: #FAF3BC;
background: #4FB69F url('images/texture.png') no-repeat right bottom;
padding: 15px 30px;
margin: 150px 0px;
border-top: 5px;
border-radius: 25px;
text-decoration: none;
text-transform: uppercase;
}
I am also having issues with the homepage button, I would like some room there as well, but I've tried couple of things like padding and margin and was not able to do it...
I would appreciate any help .... here is the page live, if you like to take a peak http://brewstahs.com/menu.html
I know why your css is not working. The most basic use of CSS is to create a layout, but even though your DOM contains div representing container and footer, the height occupied by each is
equal to the height of its content(because you have not provided any height to the div containers).In short,
margin : 150px 0px does not work because the parent container(nav) does not have that height to provide the margin to it. So provide a height to nav and div and it will work.
Use tools like Firebug to see your layout and see where you're going wrong.
All the best!!
Maybe you should try with background-position attribute:
http://www.w3.org/wiki/CSS/Properties/background-position
What do you want to do?
In case of moving the button, try
margin-top: 50px; for example in the css of btn. This way, the button is moved 50pixels to the bottom. Margin-left moves the button to right, ...
if you are trying to move the button down then you need to first put it in a wrapper
if not try this .
body {
background: url('images/prices.jpg');
min-height: 100%;
height: 100%;
}
#navigation {
position:relative;
display:block;
margin:40px 0px 0px 0px;
padding:0px;
width:auto;
height:auto;
}
#navigation ul {
display:block;
position:relative;
margin:auto;
padding:0px;
}
#navigation ul li {
list-style:none;
}
#btn {
color: #FAF3BC;
background: #4FB69F url('images/texture.png') no-repeat right bottom;
padding: 15px 30px;
margin: 150px 0px;
border-top: 5px;
border-radius: 25px;
text-decoration: none;
text-transform: uppercase;
}
and about your background you can try one thing. Have a looping background texture similar to the one you have right now with background-repeat:repeat; and then put the main background image above it with z-index and centered if required. Just to give you a simple example
body {
background-image:url('images/loop.jpg);
background-repeat:repeat;
}
#backgroundimg {
background-image:url('images/prices.jpg);
background-repeat:no-repeat;
display:block;
position:relative;
width:980px;
height:700px;
margin:auto;
padding:0px;
}
hope this helps :)
This is how i configured the divs in HTML
<div id="wrapper"><div id="content"><div id="details-middle" class="box">
..........content.........
</div></div></div>
And this the css for the div's
#wrapper {
border-radius: 12px;
font-size:13px;
line-height:140%;
width:1008px;
margin:0 auto;
margin-top: 15px;
margin-bottom:15px;
}
#content {
margin-left:20px;
width:1008px;
}
#details-middle
{
float:left;
width:700px;
}
.box {border: 1px solid #CCC;
border-radius:12px;
margin-bottom:7px;
padding:10px 12px;
background-color: #FFF;
}
Everything is showing out of the div's ..
You are floating details-middle, which means non floated elements will not make room for it, unless they themselves are floated, or you clear the float.
My preferred solution is to give the parent overflow: hidden; which will force the parent to make room for its floated children:
#content
{
margin-left:20px;
width:1008px;
overflow: hidden; /* change here */
}
Not exactly sure what you're wanting, there isn't a lot of description in regards to your question, but you need:
$('#details-middle').text();
to gather just the text from that DIV.
If you're not wanting to display children elements of the DIV, then refer to this answer I gave recently - it might be your scenario too:
jQuery pull out text inside div but not in p tag
I've been stuck on something for a while I hope is simple to fix.
I have a menu from css play which I have edited. I would like to make it full width in my main body div (980px wide) and have the menu headings spread out to fill the space.
At the moment it is just centered and there is a gap either side of the menu.
I put it here so you can see what I mean! http://nugrafik.com/menu_test_delete.html
I've tried cheating by fiddling with the margins/padding etc but it never looks quite right.
Can anybody help?
CSS:
.menu {display:inline-block;}
.menu {display:inline;}
.holder {display:table;}
.menu {
display:table-row;
padding:0;
margin:0;
list-style-type:none;
white-space:nowrap;
font-family: Helvetica, Verdana, Tahoma;
color: #333333;
}
.menu li {display:inline;}
.menu a, .menu a:visited {
display:block;
float:right;
padding:3px 11px;
color:#666666;
background:#e0e0e0;
border:1px solid #fff;
text-decoration:none;
}
.menu a:hover {
color:#fff;
background:#c1d045;
}
#wrapper2 {
text-align:center;
font-family: Helvetica, Verdana, Tahoma;
color: #333333;
}
#wrapper2 .holder {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
text-align: center;
}
#mainbody {
background-color: #66CCFF;
height: 400px;
width: 980px;
margin-right: auto;
margin-left: auto;
}
HTML:
<body>
<div id="mainbody">
<div id="wrapper2">
<div class="holder">
<ul class="menu">
<li>Contact</li>
<li>Links</li>
<li>Scholarships</li>
<li>Organizers</li>
<li>Abstracts</li>
<li>Accommodation</li>
<li>Venue</li>
<li>Scientific Program</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</body>
1) Take off display: table; in .holder.
2) Take off display: table-row; in .menu (better take of all display you have set to .menu
3) Take off display: inline; to .menu li and add to it float: left; width: 11.11%;. 11.11% is 100/9, to have all your items to have same width. Otherwise set manually a width for each item, because otherwise floating them (or displaying inline as you did) they will use just as width as they need and your menu won't be 100% width.
Write this in your css:
#wrapper2 {
background:#E0E0E0;
overflow: hidden;
text-align: center;
}
After applying sandeep's recommendation, increase the left/right padding a little more for each (16px seems about right to me...it's closer than the 11px you have now) and then add special classes to the leftmost and rightmost menu items to remove the left and right borders, respectively, so the leftmost menu item has no border-left and the rightmost menu item has no border-right.
This still probably isn't exactly what you want, with calculated fluid widths of menu items, but as you've seen, they can't be evenly spaced and fill the width completely evenly with no less and no more, so the left and right menu items will be slightly larger than the others. It's probably not enough to notice anyway.
Edit: I hadn't thought of 11.1% width. That would get you to fill the full width.
You need to set widths correctly.
http://jsfiddle.net/urNjW/
Unfortunately this is not fluidly possible with CSS. Even if you do get it right, it is likely to collapse due to small changes. So it is not considered good practice unless you know it will be absolute (which is hardly ever the case, and should never be).
Alternatively though - just have the menu items float to the left and remove the borders. They will look much nicer than if you accomplished the alignment anyway. The menu will also be much more flexible. Maybe try a less dramatic hover state too. Good luck.
I am trying to center a div button and its not working
here is the css
.game-actions{
margin-left:auto;
margin-right:auto;
}
.game-actions a.up {
display: block;
text-decoration: none;
font-weight: bold;
padding:12px 32px;
float: left;
border: 1px solid #c1d9f6;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.game-actions a:hover {
border-color: #80b0ea;
background:#e1ecf3;
}
here is the html
<div class="game-actions">
<a class="up" id="a1" href="#" onClick="toggle(this.value)">Tweet it</a>
</div>
Website is at - http://gibberize.com/
By default, div tags expand their width to the entire width of their parent container. Thus setting their margins to auto doesn't do anything since it just auto-sets both margins to 0. If you set a fixed width for the div then it will center.
By default div elements are the full width of the page and since you aren't specifying how wide it should be the auto margin will be 0 on both sides.
In this case I would use a text-align: center; on the div to center the link.
Here's one solution for you. To your first .game-actions CSS class add:
width:1px;
Also, change the caption Tweet it to:
Tweet it
(to avoid breaking the button over 2 lines)