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:
Related
I have а search page and want to prevent "top20" div section on the right to move below the section rounded by rectangle when I change the size of browser window.
CSS:
#search_parameters_border {
border: 1px outset gray;
float: left;
padding: 10px;
}
#searchBox {
background-color: white;
color: black;
text-align: left;
margin-bottom: 15px;
}
#categories {
line-height: 20px;
height: 420px;
width: 250px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#additionalFilters {
width: 700px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#top20 {
width: 650px;
padding: 5px;
margin: 5px 5px 5px 50px;
float: left;
}
The screen shot:
Since you don't have a containing element for your floats, the phone is allowing your last float to get pushed down below where you're not wanting it to go. It's generally a good idea to use a "container" or "wrapper" div as you'll see them referenced to at times with your site's maximum allowed width to surround your builds (or min-width if you want to get a little fancier.) It will solve your issue as well as help you stay organized. As well, like in this situation, if you run into problems, sometimes it can be faster to just set a property in your "container" div to "position:relative;" and then position the div you're having trouble with absolutely via "position:absolute; top:100px; left:50px;" or something similar for spacing. If you have any questions about anything above or in the other comments let me know and I can explain in more detail.
As you're using absolute values for all widths you need to give a min-width to the surrounding container. Than you're top20 div will not move.
But you should consider making you're style more fluid.
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.
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.
I just stumbled on a problem where the shared border between a menu bar and the main content box does not go on properly (as the content box is too small)
Image: http://imgur.com/O3ra9
Code: http://jsfiddle.net/gh55e/2/
So I was wondering if there was a way to fix the border. Maybe by giving them both one and making it overlap? Just have no idea how to do this as margin -x doesn't work.
Give the right element a border all around, then use the margin-top and margin-left properties in the negatives to make them overlap. Here's an updated jsfiddle:
http://jsfiddle.net/gh55e/4/
CSS:
#right {
width: 85px;
float: right;
background-color: #e1e1e1;
padding: 0px 10px 10px 10px;
margin-top: -54px;
}
For later visitors, this is the CSS that eventually fixed it.
#right {
width: 385px;
float: right;
background-color: #e1e1e1;
padding: 0px 10px 10px 10px;
margin-left: -10px;
}
You basically make a margin of 10px and move it back for 10 px
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.