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;
}
Related
Hi im having trouble with centering the nav on this draft im making for a client.
Here is the link http://cjdrafts.info/germanserviceshop/
Please help thanks.
I'm not a professional, still learning coding and found a way to fix your issue.
What I did is commented the float left for .menu-wrapper
#Top_bar .menu_wrapper {
/* float: left;
z-index: 201;*/
}
Then defined 650px width and set the left and right margin to auto
.header-stack #Top_bar .menu_wrapper {
clear: both;
margin: 0 auto;
width: 650px;
}
Set width for menu_wrapper
#Top_bar .menu_wrapper {
z-index: 201;
width: 650px;
margin: auto;
}
remove float, set fixed width and set margin: auto.
Use display: inline-block instead of float for li
#Top_bar .menu > li {
margin: 0;
z-index: 203;
display: block;
display: inline-block;
}
and:
#Top_bar .menu_wrapper {
float: left;
z-index: 201;
width: 100%;
text-align: center;
}
set 100% width for parent and use text-align: center.
thanks for the help.
Doing the edits on a browser it does work but for some reason when i placed the css codes in the theme style sheet. Nothing work, i tried both solutions.
What seems to be the problem? I have been on this for atleast 7 days now.
I actually have a solution which is to use a menu plugin but this will be my last option.
I would like to have a image on the left with a heading on the right. I want both of them to scale in size and spacing as the page is shrunk. I have used this code: width: 10%; height: auto; margin: 2% 0px; to have the image on the top left of my page and scale in both spacing and size to the page when the browser is shrunk (I have also included media queries which wouldn't think would make a difference). I have tried using positioning: absolute which doesn't work. I am a novice to using HTML5 and CSS3. This is my first project and second post on Stack Overflow.
I think this is what you are trying to do
HTML
<div class="wrapper"><img src="yourimage.jpg"/><h1>my Heading Goes here</h1></div>
CSS
div.wrapper {
width: 100%;
height: auto;
max-width: 600px;
border: thin solid #333;
}
div.wrapper:after {
content: '';
display: block;
clear: both;
}
div.wrapper img {
display: block;
float: left; width: 40%;
height: auto;
margin-right: 5%;
}
div.h1 {
display: inline-block;
line-height: 20px;
margin: 0px;
padding: 0px;
}
You can check it here
jsfidlle
Could you make a http://jsfiddle.net/?
It's kinda hard to understand what you're after based on our description alone.
Recently took over a site from a new client. Trying to make two div's in the header. Left is the logo. Fine, no problem there. But the right div has two elements and they should both be on the right hand side of that div. Tried floating right and changing margins, padding, etc. Not much working. Big issue is the order should be social icons and then MailChimp widget and instead, it's in reverse. Here's what I'm currently using for my CSS for that area:
#theme-logo {
width: 50%;
float: left;
margin: 0;
}
#theme-header {
min-height: 60px;
}
#theme-header .tabcontent ul li.widget {
position: relative;
float: right!important;
padding: 0px 20px;
}
#theme-header .tabcontent {
position: relative;
float: left;
top:0px;
width: 50%;
}
#theme-header .tabcontent ul {
float: left;
list-style: outside none none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
Found it. The original theme had absolute positioning on the MailChimp widget's div. Like this:
#mc_signup { position: absolute; right: 0px; width: 226px; }
So I just deleted that line from the theme's CSS and problem seems to have been solved.
Never fun to take over a theme from someone else.
I have created a website however when I shrink the browser the website stays in position, apart from the form.
If anyone know's how I can stop the form from moving, I will be very grateful.
I have tried position: relative and white-space: no-wrap; but still no luck.
Thanks in advanced
Unique
My Code:
http://jsfiddle.net/r5cu1157/
#form-holder {
float: left;
width: 400px;
height: 400px;
padding-left: 100px;
padding-top: 30px;
display: block;
*display: block;
white-space: nowrap;}
If you want the form to be center aligned then do a
Margin: 0 auto;
remove the float left and i would suggest to stay away from specifying a height of elements
http://jsfiddle.net/r5cu1157/1/
This is the CSS that I have for my container that holds my table and forms, could try using it for your form, I believe it is a mix of position and margin:
.container
{
position: relative;
top: 250px;
background-color: #877CB0;
margin:0 auto;
text-align: center;
}
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.