I'm working on my website header which has a logo image (100px x 100px) in the left hand corner and a navigation bar which is vertically aligned centrally using css table properties. Both the logo image and the navigation bar UL element are in a #header div which has a width of 100%.
What is the best way to reduce the gap between logo and the navigation element without ruining my layout?
Added the borders so elements can be distinguished easily. I'm also using the Twitter Bootstrap framework.
The HTML for my page can be found here: http://pastebin.com/RpgcPDdh
Here is my CSS:
#wrapper {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: medium none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
margin: 0 auto;
padding: 0 50px;
}
body {
background: url("images/maze_bg.png") repeat scroll 0 0 #DDDDDD
}
#header {
display: table;
padding: 20px 0;
width: 100%;
}
#header ul{
border: solid 1px red;
display: table-cell;
vertical-align: middle;
}
#header img{
border: solid 1px blue;
}
Appreciate any help.
Throw in a
margin-right: 20px;
or something on the #header ul. That will move it left.
padding-right did the trick! I guess I should've persevered instead of creating a question on here.
Related
Here is a Plunker I just created: http://plnkr.co/edit/jKo6yavo9fFNHiMsEvAL?p=preview
It is a simple single row layout. What I need is a fixed minimum margin on both sides (left and right) of the row. Let's say 25px. Resizing the window should always show at meast 25px of grey background before and after the row.
I tried modifying the table.container style from:
table.container {
width: 580px;
margin: 0 auto;
text-align: inherit;
}
to
table.container {
width: 580px;
margin: 0 25px 0 25px;
text-align: inherit;
}
But it seems it does not work for the right margin (goes out of the page). Any suggestion?
I think the simplest solution would be to use the left and right table borders instead of margin.
Something like the CSS below should do the trick.
table.container {
width: 580px;
border-left: solid 25px #f1f0ef !important;
border-right: solid 25px #f1f0ef !important;
text-align: inherit;
}
Since not all email clients support margin your other option would be to add padding/border to an outer table/tables.
If you have any questions let me know.
Trying to add a box around a menu of links in Wordpress. So far I've got this - which should make a box of 150px x 50px if I am correct. However, while margin, padding, etc, all work, this does not. Why would that be the case? Has width become deprecated in recent CSS?
.menu-header .menu-item {
display: inline !important;
margin: 0px 50px !important;
border-style: solid !important;
border-width: 2px !important;
width: 150px !important;
height: 50px !important;
background-color: #EDEDED !important;
}
Remove display: inline - that will cause problems with setting a size. The element needs to be block level to specify the size.
Also, the CSS can be simplified:
.menu-header .menu-item{
margin: 0 50px;
border: 2px solid #000;
width: 150px;
height: 50px;
background: #EDEDED;
}
display:inline and width 150px collide with each other.
An inline element has at every time the width of it's content.
You could set the display to inline-block when you really need it inline or else to block.
All of the margin settings for the content within the main body section of the homepage of this site I'm working on are not displaying properly and they are overlapping one another. This has been causing me a crap-load of annoyance and I can't figure out what's wrong. Please take a look and see if you can help me.
once again, there are 3 sections within the main body and they are all showing up wrong!
Here's my site:
http://studentweb.eku.edu/alamaldean_alami/d+m/index.html
The first problem is that from the first section (history) to the second (buttons) there is an extra gap of 20px in addition to the margin that I have set, why is there a random gap (firebug and google's 'inspect element' both do not show anything there, just a random extra space).
The second problem is that the 'button' section should have a 20px margin between it and the 'content-area' section since 'content-area' is set to have a margin of 20px.
The final problem is that the bottom margin between the 'content-area' section and the footer should be a total of 40px because both of those each have a margin of 20px.
Remove the position: relative from your .buttons class
Remove below css from .buttons class line 194 style.css
position:relative;
Add this css on home.css line 3
.history {
background: none repeat scroll 0 0 transparent;
margin: 20px 20px 0;
padding: 10px;
}
Add this on style.css line 108
.footer {
padding: 20px 20px 10px;
}
style.css line 102
.content-area {
background: url("..//images/transbackc.png") repeat scroll 0 0 transparent;
margin: 20px 10px;
padding: 10px 0;
}
home.css line 38
.services div {
border-right: 1px solid white;
float: left;
margin-left: 10px;
margin-right: 10px;
min-height: 250px;
padding: 9px;
text-align: center;
width: 400px;
}
Final output of above css see below image:
I've found that an "overflow:hidden" div following a "float:left" div has doubled margin on the right. This can be tested with following code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.intro {
border: 1px solid #DBDBDB;
margin: 10px 0;
padding: 10px 0;
}
div.intro>div {
border: 1px solid #DBDBDB;
height: 150px;
margin: 0 10px;
}
div.brief {
float: left;
width: 150px;
}
div.list {
overflow: hidden;
}
</style>
</head>
<body>
<div class="intro">
<div class="brief"></div>
<div class="list"></div>
</div>
</body>
</html>
The space between right border of div.list and right border of div.intro is 20px in chrome(17.0.963.56 m) and safari(5.1.2), while being 10px in Firefox(11.0) and IE9.
Is this a bug of webkit or just an undefined preference of css?
Thanks!
I was able to reproduce this on Chrome for Mac, 17.0.963.56.
The problem stems from the fact you've given #brief and #list a height, but haven't contained the float. There actually isn't a double margin; the margin-right of 10px is combining with .intro's 10px padding-right to give the allusion of a 20px double-margin.
All things considered, the fact the WebKit (Chrome's & Safari's renderer), rendered things that way is a little strange.
Everything worked as expected with this CSS (see the Fiddle):
.intro {
margin: 0 0 20px;
padding: 20px;
background: #FFA;
overflow: auto;
height: 100%;
}
.brief {
background: rgba(255, 0, 0, 0.25);
width: 150px;
float: left;
}
.list {
background: rgba(0, 0, 255, 0.25);
margin: 0 0 0 170px;
}
The above solution seems to do the trick as long as the width of your floating element is static and predictable (as the margin of the non-floating div is set to span the floating div's width, plus the required space between the two).
If, however, you're working with a floating div with a dynamic width, you can target what appears to be a Webkit-specific issue with a -webkit-margin-start property which all other browsers will ignore:
.div.list {
overflow: hidden;
-webkit-margin-start: 0px !important; /* you can ditch the 'important' by adding 'div.intro' to the front of your selector */
}
This effectively sets div.list's margin-left: 0 in Webkit only, while accommodating a dynamic width for your floating div. Unfortunately, I haven't been able to test this in Chrome 19b yet, so I'm not sure how it'll handle this kludge.
I am working on this site: http://www.problemio.com and the blue bar image is spilling about 5px over to the bottom beyond the border of that div.
Any idea why that is happening?
Thanks!
Your #layout div is inside your .nav_bar div. Place the layout div after and outside of the nav_bar div and it should look more correct.
Because the background iamge is on the .nav_bar.
Try putting the background image on .nav instead, also remove the width.
.nav_bar .nav {
background: url('http://www.problemio.com/img/ui/problemiomainbluebar.png');
height: 40px;
margin: 0 auto;
position: relative;
z-index: 20;
}
.nav_bar {
background-repeat: repeat-x;
border-bottom: 1px solid #462C1F;
border-top: 1px solid #462C1F;
margin-top: 5px;
}
Because you're putting the background image on the outer container (.nav_bar). It should probably be on the .nav element instead.
Need something else Boss?
.nav_bar .nav {
height: 50px;
}