I'm having a bit of trouble keeping the topnav on my Web site (if you'll see the link below, the "Home," "Archive," and "About" buttons) aligned with where I'd like to keep it on browser resizing, which is at the right edge of my banner. Originally, I had four buttons and managed to keep everything in order, but things got a little wonky after I dropped one button.
Thanks for all your help.
You can fix it - get your nav to be aligned to the right side, by applying the following changes to your website:
#container-inner {
margin-left: auto;
margin-right: auto;
width: 940px;
}
.topnav {
/*Reset things that are unnecessary*/
margin-left: 0;
margin-right: 0;
position: static;
/*Set things to fix the problem*/
margin-bottom: 20px; /*This accounts for the 20px space between this and the content.*/
float: right;
}
#content {
clear: both;
}
if you put the topnav inside the banner element, and use this css:
.banner {
position: relative;
display: block;
overflow: visible;
margin-left: auto;
margin-right: auto;
width: 930px;
height: 349px;
margin-bottom: 32px;
}
.topnav {
position: relative;
display: block;
top:100%;
width: 930px;
height: 32px;
}
.topnav a{
float: right;
}
The topnav will be constant margined.
Related
just a quick CSS question. Does anyone know how to display a horizontal list at the center of the div tag. The number of elements in the list can change from page to page and I was hoping for them to start in the middle of the page. For example if there was only on list item then it would be in the center but if there was two then the first one would move slightly to the left and the second would be slightly to the right. I know the changes have to be made to the ul and li CSS code. This is what I have so far
.ui-yt-tabs {
position: relative;
width: 740px;
height: 600px;
float: left;
}
.ui-tabs .ui-tabs-nav {
position: absolute;
top: 470px;
height: 117px;
width: 735px;
padding: 0px;
}
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
}
You can do something like this:
ul {
text-align:center;
}
ul li {
display: inline-block;
}
Just remember to remove float: left; from your LI items
Any ideas how to get the social icons clickable? I know if I remove the main #artistheader the icons become clickable, however that #artistheader has the header BG image.
<!--Begin Artist Header-->
<div id="artistheader">
<div id="artistimage"><img src="../images/ykmfull.png" alt="YKM"></div>
<div id="artistname"><center><img src="../images/ykmName.png" alt="YKM"></center></div>
<div id="artistSocial"><center>
<img src="../images/fb.png" alt="fb" width="50" border="0"><img src="../images/twitter.png" alt="tw" width="50"><img src="../images/insta.png" alt="insta" width="50"></center></div>
<!--artist header end--></div>
I added the relative positioning and z-indexes trying to find a solution weren't originally there.
#artistheader {
position: relative;
z-index: -45;
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#artistimage {
clear: both;
float: left;
margin-left: 8.4249%;
width: 24.1758%;
display: block;
}
#artistname {
clear: none;
float: left;
margin-left: 9.5238%;
width: 41.0256%;
display: block;
margin-top: 7%;
}
#artistSocial {
position: relative;
z-index: 5000;
clear: none;
float: left;
margin-left: 9.5238%;
width: 41.0256%;
display: block;
}
#fb {
position: relative;
z-index: 5000;
clear: none;
float: left;
margin-left: 26.3736%;
width: 32.6007%;
display: block;
}
#tw {
clear: none;
float: left;
margin-left: 1.0989%;
width: 15.7509%;
display: block;
}
#insta {
clear: none;
float: left;
margin-left: 1.0989%;
width: 15.7509%;
display: block;
}
Double instances of #artistheader existed. 1 in the source code on the page and 1 in the CSS. Upon deleting the rule on the CSS and leaving the one in the source code the links worked again. Not sure where the second instance came (one in source code) and I'm it didn't matter which I left but because I have blur effects on the one in source code I kept it. I assume both were conflicting with each other and then just "froze" that section.
i am working on this grid gallery where List items are set to width 20% so that they can be like 5 in one row using float left.
Now i am using a div with class overlay so that hen someone hovers over Li the overlayis shown.
the problem is
when i give overlay 100% width and height 100% it covers the whole screen and not just that Li.
here is my HTML code
<ul id="thumbsList">
<li>
<div class="overlay">Hello</div>
</li>
<li><div class="overlay">Hello2</div></li>
</ul>
And here is my Css
#thumbsList {
margin: 0px;
padding: 0px;
}
#thumbsList li {
list-style: none;
float: left;
height: 100px;
width: 20%;
background-color: gainsboro;
}
.overlay {
text-align: center;
z-index: 2;
height: 100%;
width: 100%;
position: absolute;
background-color: red;
}
Please help me fix the problem.
thanks.
You need to add position: relative to the li item, the absolute positioning in the overlay wil take this as reference.
#thumbsList li {
position: relative;
list-style: none;
float: left;
height: 100px;
width: 20%;
background-color: gainsboro;
}
Also you need to add a display: none to the overlay and a hover on li that change the display: none to display: block on the overlay, like this:
#thumbsList li:hover .overlay {
display: block;
}
Demo: http://jsfiddle.net/HPJ8v/
I'm trying to overlap images in css. They are both aligned in the center but one is below the other one. I tried z-index'ing which is fine with position: absolute; but if I do that then I lose my centering.
Issue:
The dots are supposed to be over the phone.
My HTML:
<div class="content-top"><div class="cwrap">
<motto>Become Famous On Vine.</motto>
<img id="phone" src="./images/phone.png">
<img id="dots" src="./images/dots.png">
</div></div>
My CSS:
.cwrap {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.content-top {
background-color: #00b589;
height: 650px;
width: 100%;
}
.content-top motto {
display: block;
width: 100%;
text-align: center;
padding-top: 15px;
color: #FFF;
font-size: 60px;
font-family: "Source Sans Pro ExtraLight";
}
.content-top motto {
display: block;
width: 100%;
text-align: center;
padding-top: 15px;
color: #FFF;
font-size: 60px;
font-family: "Source Sans Pro ExtraLight";
}
#phone {
z-index: 999;
}
#dots {
z-index: 1000;
}
.content-top img {
margin-left: auto;
margin-right: auto;
position: relative;
display: block;
}
Try this. position: absolute;, top: 0;, left: 0;
The the red div is semi-transparent to reveal the blue div below.
Now, if you want to center these in the middle of the page, <div class="container"> use css: margin: 0 auto;.
Link to example: jsFiddle
Use on #phone and #dots elements these css attributes: position, z-index, top, and left.
Use position: absolute the upper layer, and the top and left to place the upper layer to the correct location. Use z-index to specify the layer, lower value is backer, bigger value is upper.
Having an issue on this site where the content area won't float next to my side bar.
800px content width. If I add up my content and sidebar divs, padding, etc I'm only coming up with 773px.
This is creating a child template from and then editing the the 2011 wordpress template.
http://www.rogerscomcenter.com/
try this
.left-sidebar #content {
margin: 0 26px;
overflow: auto;
width: 484px;
}
.left-sidebar #primary {
float: left;
margin: 0;
}
#primary {
float: left;
margin: 0 -26.4% 0 0;
}
I've cleared all unnecessary parts, added floats and width to both elements ('primary', 'secondary' divs). All seems ok.
http://imageshack.us/photo/my-images/804/rogerscenterforcommerce.jpg/
Change your css from:
.left-sidebar #secondary {
float: left;
margin-left: 28px;
margin-right: 0;
width: 235px;
}
To this:
.left-sidebar #secondary {
float: left;
margin-left: 28px;
margin-right: 0;
position: absolute;
width: 235px;
}