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.
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;
}
In my article header section, I'm having a few alignment issues. I did a screen shot, but here is the live page:
http://www.picturemeclubbing.com/newyear/index.php/2014-01-21-01-37-46/item/19-phil-cashout-interview
Pic here:
I chose to inspect the area I wished to move and found:
span.itemAuthorDetailss
position: relative;
text-indent: 4px;
bottom: 20px;
Changing bottom: 20px to a lower number brought the text down. At least in the code inspector window. But when I made the changes in the css file, the page when haywire. On top of that, the image next to the text would not move down independently. I'm new to this coding stuff. Any help would be greatly appreciated.
span.itemAuthorDetailss {
position: relative;
text-indent: 4px;
float: right;
}
Does that work? Maybe add some margin to:
.authorDetails {
float: left;
margin-right: 12px;
margin-top: 5px;
}
Another alternative is your PMD image seems a little high - so try this:
.authorDetails img {
margin-top: 5px;
float: left;
}
.authorDetails span.itemAuthorDetailss {
position: relative;
text-indent: 4px;
float: right;
}
Put that in your custom.css style sheet:
http://www.picturemeclubbing.com/newyear/templates/yoo_moreno/css/custom.css
I'm trying to create a fixed-position footer at the bottom of my page. but there's an issue with spacing below the image and the bottom of the viewpoint that is unwanted:
Base Image:
The Issue:
The padding below the image is unwanted.
HTML:
<div id="containerBarKonge">
<ul>
<li><img src="./kongelogo.png" /></li>
</ul>
</div>
CSS:
#containerBarKonge {
position: fixed;
bottom: 0px;
width: 100%;
z-index:9999;
padding: 0px;
margin: 0px;
}
#containerBarKonge > ul {
position: relative;
list-style-type: none;
padding: 0px;
padding-left: 2px;
margin: 0px 20px;
min-width: 1053px;
background-color: #900;
}
#containerBarKonge > ul * {
padding: 0px;
margin: 0px;
}
Try setting the vertical align to bottom on the image:
#containerBarKonge img { vertical-align: bottom; }
The issue comes from the image having a default property of "display: inline;" - which is the equivalent to saying "have this image run along like text."
Images should rarely be employed as inline containers. Instead, an image should be defined as either display: block or inline-block. This gives you much precise control over your iamges versus - just align this to the top or bottom. What if you want the image 1px from the bottom? With vertical-align you can not.
So the solution is to do the following:
#containerBarKonge > ul li {
display: block;
height: 20px; /* or however tall it is */
}
#containerBarKong > ul li img {
display: inline-block;
/* Assuming it is 18px tall and you want it at the bottom: 20 - 18 = 2px */
margin: 2px 0 0 0;
}
there you go. You have PRECISe control of the positioning of the image while it retains its ability to run along like text.
I am Trying to Place My Footer in the bottom Right of the page. I am using the HTML5's <footer> tags.
So, here is what i have in my CSS:
footer {
position:absolute;
bottom: 0px;
float: right;
height: 35px;
margin: 0px 50px 0px 0px;
background: #9FF;
color: #000;
text-align: right;
padding: 10px 30px;
}
With this code the footer perfectly sticks to the bottom. What i want is that it should also be in the rightmost part of the footer as well.
http://i47.tinypic.com/2rrox0w.png
So, when i use the following code: right: 50px in the CSS. Then the footer gets positioned relative to the browser. So, whenever i Resize my browser the footer is dislocated.
What i Want ?
I want to footer to be placed at the bottom. And at a a margin of 50px(right) from the container(#main or #maincontent) it is placed in rather than the browser. The float: right does not seem to work.
I have looked the whole internet and stackoverflow as well. But, could not find a solution to this kind of issue.
I am using Google Chrome 22. So, My Browser is largely HTML5 compatible.
Updated: you don't need to position it absolute, just remove the position, give some width to your footer and float it towards right like this
footer {
float: right;
height: 35px;
margin: 0px 50px 0px 0px;
background: #9FF;
color: #000;
text-align: right;
padding: 10px 30px;
width: 180px;
}
My New Fiddle
Add position: relative to the container, and then use the right property.
So your full CSS would look something like this:
#main,
#maincontent {
position: relative;
}
footer {
position: absolute;
bottom: 0px;
right: 50px;
height: 35px;
margin: 0px 50px 0px 0px;
background: #9FF;
color: #000;
text-align: right;
padding: 10px 30px;
}
Remove float and give right:50px (or your desired value) to it. if it still doesnt work then give clear:both;and also check your padding and margin values.
You need to create a centralized container to the footer with the same with that #main or #maincontent. And then use the margin inside that footer container.