I inserted this code to build a thumb gallery but it messed up my left and right border of my wrapper (it disappear). You can see it here http://blog.howtodjango.com/temp/template/
below is the code that causes it.
.gallery li {
display: inline;
list-style: none;
width: 126px;
min-height: 175px;
float: left;
margin: 15px 15px 1px 15px;
text-align: center;
}
Any help would be great!
this is related to floating elements to left, add this css:
#page-wrap {
overflow: hidden;
}
#main-content {
background: none repeat scroll 0 0 white;
overflow: hidden;
padding-left: 250px;
padding-top: 5px;
}
If you wanna figure out why, read this
You need to set overflow:auto and remove the left padding on #main-content
#main-content {
background: none;
overflow: auto;
padding-top: 5px;
}
That works for me.
You need to remove an extra div tag that exists in your code. Delete one of them at the end and see if this works. Or you could be missing an open tag. Since you did not post your code I cannot figure this out.
Related
My CSS positioning skills have always been truly terrible. I'm looking to place my nav bar next to my logo, as well as making it move with the page and not get all screwy on anything smaller than a maximized window on a 1080p screen.
What it currently looks like: http://5.9.78.201/abellant/
It will likely look odd if you're on a different screen size.
I've (so far) used methods found on here, to no avail, using relative, absolute, and even clearing before giving up on it.
Can anyone show me where I'm screwing this up? I'm quite embarrassed by the fact that of all things, my positioning is just so bad.
Thank you.
If you want to position your logo and navbar at the center of the page::
Set #header "display:inline-block", "height:auto" and "text-align: center;" and remove all the css you have added to #logo and #navigation
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
text-align: center;
}
And if you want to set your logo and navigation side by side::
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
}
#logo {
float: left;
width: 50%;
}
#navigation {
float: right;
margin: 40px;
}
If you want to move your header section with page scroll. Set #header to "position:fixed".
So part of the problem is that you have a fixed left and right margin. Remove the fixed left and right margin for #logo and #navigation and do something like the following in your CSS:
#header {
margin: 0 auto; /* 0 px on top and bottom, auto on left and right => centered for a block element */
width: 960px; /* You need a width that will accomodate the logo and nav */
}
To make this work at other sizes, you'll need to look into CSS3 breakpoints. Here is a tutorial:
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en
I solve your problem.
.container {
min-width: 500px;
position: relative;
text-align: center;
}
#logo {
display: inline-block;
vertical-align: middle;
}
#navigation {
display: inline-block;
}
If you noticed that the logo and the menu are NOT perfectly center it's because your image has a small white space, if you could delete that space and replace the new image it will be PERFECTLY center :)
I am creating a simple blog template. In the right corner of the template there is a search box in the header. The search box should appear there, but at some moments it appears under the header.
This happens every now and then, if I refresh the page a few times the box will somethimes jump positions. I have used Google Chrome for the developent The html of this page is purely static, so I don't have a clue why this is happening. Could anyone find out why this box is jumping up and down.
The affected page can be found here.
I can't re-create your problem, but I'm sure adding position:relative to either nav or .wrapper
.wrapper {
width: 800px;
margin: 0 auto;
position: relative;
}
and position:absolute to the searchbox will prevent any jumping.
header#top #searchBox {
position:absolute;
top: 0;
right: 0;
display: block;
width: 240px;
height: 45px;
// line-height, any other styles
}
Try the following
header#top #searchBox{
float: right;
display: inline-block;
line-height: 45px;
width: 63%;
text-align: right;}
The solution is quite simple,
just ad float: left; to the menu element ( header#top nav ul)
header#top nav ul {
list-style: none;
height: 45px;
display: inline-block;
float: left;
}
than you will only need to add height to the wrapper
.wrapper {
width: 800px;
margin: 0 auto;
height: 46px;
}
This is part 2 of this question: Hash(#) Link Causes Content To Jump - Why?.
The root issue is actually something that's only occurring in FireFox (my apologies for not bringing this up in the original question). When I put together the Fiddle, I thought I had recreated it cross-browser, but even with the fix that was suggested by SkyOut, the issue is still not resolved in FF.
Here's the original: http://jsfiddle.net/GKCE6/10/show
And here's the version with the hashtag in the URL: http://jsfiddle.net/GKCE6/10/show/#some-content.
This time it's a bit harder to notice, but you can see that 'A link' is slightly cutoff at the top (just on FF). I removed the height: 1000px rule from the original Fiddle, just to verify that, while the issue gets fixed on Chrome, there's still a similar issue in FF.
Any ideas?
Fiddle: http://jsfiddle.net/GKCE6/10
UPDATE 1/17/2014 I actually found the problem - seems like it's a result of the height property in the 'clearfix' that's being used. If you compare this fiddle with this fiddle (in FF), you'll see what I mean. Removing the height:0 fixes it. Any idea why that would be breaking FF in this one, tiny instance?
Edit:
Took a look at your fiddle again and this time I updated it with a few changes.
http://jsfiddle.net/GKCE6/12/
I took the off all of the set widths that you had, which will make it more fluid/responsive to the screen size. Also your nav was collapsing because of the floated elements inside of it, so I added a clear class and cleared the floats in your nav.
html {
margin: 0;
padding: 0;
background: none repeat scroll 0 0 #FFFFFF;
height: 100%;
width: 100%;
}
body {
min-height: 100%;
}
#container {
margin: 0 auto;
overflow: hidden;
position: static;
width: 100%;
height: auto;
}
nav {
border-bottom: 1px solid #E6E6E6;
margin: 0 auto;
padding: 1em 0 0.2em;
display: block;
}
nav h2 {
float: left;
display: inline;
}
nav a {
float: right;
display: inline;
}
#content:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#content {
border: medium none;
border-radius: 0;
box-shadow: none;
margin: 0 auto;
padding: 0;
}
.clear {
clear:both;
}
I was building a static html page for creating a wordpress theme.but now i notice that 48px margin is above the body element(I found it with chrome developer tools).i can fix it by just adding a -48px margin but what exactly is causing this problem,can someone help me.
My CSS
body{
font-size:18px;
line-height:1.72222;
color:#34495e;
font-family:Ubuntu;
margin:0
}
aside {
background: #31373d;
height: 100%;
position: fixed;
width: 20%;
font-weight: normal;
color:#fff;
}
.main {
margin-left: 20%;
}
.content{
width: 65%;
max-width: 760px;
margin: 3rem auto;
}
Look at this live JSfiddle Demo - http://jsfiddle.net/aq96b/1/embedded/result/
It's the line
margin: 3rem auto;
in your .content that's causing this (if I properly understand the problem). Unchecking/removing that margin will move the content back up to the top left of your .main div.
To maintain a similar effect with the content position, you could add padding to the .main of the same amount ie
padding: 3em;
Remove the margin: 3rem auto; from .content.
DEMO HERE
It's coming from the div .content. To correct this you should add overflow:hidden to .main
Example
.main {
margin-left: 20%;
overflow: hidden;
}
Alternatively you can set .content to inline-block. This will also correct the issue.
Example
.content {
display: inline-block;
}
I have a template which has 3 equally spaced boxes, the problem is that i am unable to get the last box to align correctly the first two elements.
how do i add a 3 block equally spaced box in css without tables?
my attempt http://khine.3b1.org/activities/activities.html
any advise much appreciated.
thanks
Make all three boxes float left:
.box ul.supports-list li.last {
width: 200px;
position: relative;
float: left;
}
And provide more width overall:
.box .holder .frame {
background: url(./box-b.gif) no-repeat 0 100%;
width: 620px;
padding: 18px 4px 42px 16px;
}
try to change the next CSS rules to:
.box ul.supports-list {
font-size: 11px;
list-style: none outside none;
margin: 7px 0 0;
overflow: hidden;
padding: 0;
}
.box ul.supports-list li.supports-list-item {
display: list-item;
float: left;
outline-style: none;
width: 200px;
}
.box ul.supports-list li.last {
float: left;
width: 200px;
}
My guess would be to put each box into a div, and then adjust each div's margin-left and margin-top properties to get them to all line up. You'd also want to set the float property of all of the boxes to left. It might not be the most-widely-accepted way of doing things, but that's how I usually solve problems like this.
You can take a look at this example jsFiddle I did for you here: http://jsfiddle.net/Cwca22/g8x5E/ - Hope this helps!