in all catelog pages of site the link menu on top is not getting aligned, see sample link - car finance section.
*whenever we try to put 3rd link on top menu left- it splits to next line
Same issue on top menu right - any 4th link splits to next line*
We tried changing width - used all permutation / combination - but to no help
What we seek for it is
.footer-top-box-left - for top menu link units
.footer-top-box-right - for google custom search box
so that both comes in 1 single line
below is the code of css used for - pl suggest
#footer-container {
float:left;
width:1000px;
clear:both;
background:#FFFFFF;
text-align:center !important;
}
#footer-container .footer-top-box {
float:left;
width:965px;
margin:0 0 10px 5px;
padding:0 5px 0 10px;
height:33px;
background:url(../images/footer-box-bg.gif) repeat-x;
border:1px solid #e7e5e5;
}
.footer-top-box .footer-top-box-left {
float:left;
width:300px;
margin:0 0 0 5px;
font: normal 10px Arial, Helvetica, sans-serif;
color:#000000;
text-align:left;
padding:10px 0 0 0
}
.footer-top-box-left img {
margin:0 3px 0 3px;
}
.footer-top-box .footer-top-box-right {
float:right;
width:500px;
margin:0 5px 0 0 ;
font: normal 10px Arial, Helvetica, sans-serif;
color:#000000;
text-align:right;
padding:10px 0 0 0;
}
.footer-top-box-right p {
margin:0;
padding:0;
font: normal 10px Arial, Helvetica, sans-serif;
color:#000000;
}
.footer-top-box-right p a:link,
.footer-top-box-right p a:hover,
.footer-top-box-right p a:visited {
margin:0;
padding:0;
font: normal 10px Arial, Helvetica, sans-serif;
color:#b60205;
text-decoration:underline;
text-align:justify;
}
Change the width of the holder div - "footer-top-box-left" or "footer-top-box-right" and it should work.
Testing with a copy of your html I was able to add a 3rd item on the left after changing "footer-top-box-left" from 300px to 400px width.
If you want to have box boxes as a single line I would recommend making a single div and perhaps using float: right for the menu items that must be aligned to the right.
Related
This is driving me crazy. I am building a new horizontal scrolling website in Wordpress. The header and footer are simple fixed elements, but the page content scrolls horizontally. I am not trying to do this within a post, but as a page. Everything works fine up until I hit a certain width and then a new line is created of my images, messing up the flow of the entire page. It also then hides the footer. I have looked at this in multiple browsers and am stuck as what to do. Shouldn't I be able to horizontally scroll for as long as I want? It seems like I hit some sort of maximum width on my website.
Here it is looking good and then if I add two more images in the same manner using divs it skips a line and screws everything up and looks bad.
Please help. Here is the relavent CSS:
/************************* GLOBAL STYLES ***************************/
body {color:#eee; background: #000000}
.container-inner {position:relative; overflow:auto}
.container {background:#111; position:relative; overflow:auto}
h1,h2,h3,h4,h5,h6 {color:#eee;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {color:#eee;}
h3.sub,h2.sub {margin: 0 0 10px 0;padding: 0 0 5px 0;font-size: 1.9em;font-weight: bold;line-height: 1em;text-transform: uppercase;letter-spacing: 2px;color: #515151;border-bottom: 1px solid #000;}
a {color:#428ce7;text-decoration:none;}
a:hover, a:focus {color:#fff;}
p {color:#eee;}
h6.top {color:#ccc;}
.login {float:left;}
/* Posts */
.content {font-size: 1.2em; position:relative; overflow:auto}
.content h2 {font-size:1.5em; border: 3px solid white; text-align: center; padding: 2px;}
.post {display:block;font-size: 1.2em;}
.post h4, .post h6 {font-size: 1.2em;}
.post h2 {font-size:1.5em; border: 3px solid white; text-align: center; padding: 2px;}
.postmetadata {background:#000;padding:1em;color:#999; font-size:10px;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.postmetadata a {}
.postmetadata a:hover {color:#fff;}
.underlined {border-bottom:1px solid #eee;}
h6.underlined {margin:0 0 1em;}
.welcomebox {padding:1.5em;margin-bottom:1.5em;color:#eee;text-shadow: 1px 1px 1px #000}
.nav-image-left, .nav-image-up, .nav-image-right {text-align:center;float:left;width:25px;margin:0 10px 0 2px;}
.nav-image-left a, .nav-image-up a, .nav-image-right a {background:#eee;padding:2px 48% 2px 48%;text-decoration:none;color:#000;}
.nav-image-left a:hover, .nav-image-up a:hover, .nav-image-right a:hover {background:#000;color:#fff;}
.nav {background:#eee;margin:0 0 1em 0;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.nav:hover {background:#ccc;}
.prev a, .next a {color:#222;text-decoration:none;padding:.2em 1em;}
.nav-interior {margin:0;padding:0;clear:both;display:inline;}
.nav-interior .next {color:#000;text-decoration:none;float:right;}
.nav-interior .prev {color:#000;text-decoration:none;float:left;}
/* Paragraph */
#paragraph {margin:0px 30px 0px 30px; text-align:justify;}
/* Horizontal Scroll */
#wrapper {
float:left;
margin:40px 20px 30px;
margin-right:-999em;
position:relative;
overflow:auto;
}
.floatbox {
float:left;
margin:0 20px 0 0;
white-space:nowrap;
}
.floatbox img {float:left;}
.floatboxtext {
width:480px;
float:left;
margin:20px 60px 0 40px;
font-family:"Courier New", Courier, monospace;
text-align:justify;
font-size:.8em;
overflow:hidden;
}
/* Footer */
#footer {padding:1.5em 0; margin:0 auto; color:#999; text-align:center; border-top:2px solid #333; position:fixed; width:100%}
#footer p {color:#999}
#footer h3 {margin:0;padding:0 0 .4em 0; border-bottom:none; color:#999}
I have no idea how this works, but it does for me, at least:
#wrapper {
margin-right:-999em;
}
To:
#wrapper {
margin-right: -99999em;
}
Your example stared working around -1080em, so I assume the margin-right determines it's maximum width. I put it as -99999em because that seemed sufficiently large, you can increase it.
No idea why I can't figure this out and I am sure it is simple...
I have a title that has a cut-through using the following code -
h2.boxtitle2 { width:100%; text-align:left; border-bottom: 1px solid #FFCC00; line-height:0.1em; margin:10px 0 10px; }
h2.boxtitle2 span { background:#fff; padding:0 10px; font-family: Arial, Helvetica, sans-serif; font-size:18px !important; margin: 0 10px; padding: 0 5px; font-weight:normal; text-transform:uppercase; color:#666666 !important;}
<h2 class="boxtitle2"><span>Key Dates</span></h2>
Looks great in all browsers except IE7... Anyone know how I can fix it there - and it is an in house website where about 40% of users are on IE7.
Position:relative and z-index:2 on the span element seems to work in my IE7 but may not be the best solution:
http://jsfiddle.net/zrxqB/13/
Try to remove the line-height 0.1em. With this line-height there is not enough space for the heading on the row. Try other way ... png may be ...
This CSS creates a nice effect when applied against a single blockquote within the content its attached to.
However, when there is more than one blockquote, everything works except the generated content.
In other words, the quote symbol is only applied to the first instance of the blockquote.
blockquote{
border:1px solid #ccc;
border-width:1px 0;
margin:20px 0;
padding: 2px 10px;
padding-left:50px;
font-style:italic;
font-size:1.2em;
font-weight:bold;
quotes:'\201C';
clear:both;
}
blockquote:before{
content:open-quote;
font-size:5em;
position:absolute;
color:#ccc;
margin:0 0 0 -45px;
font-family:georgia,serif;
font-style:normal;
font-weight:normal
}
Update: Thanks to Alex Morales, the issue is resolved by adding:
blockquote:after{content:close-quote;position:absolute;visibility:hidden;}
Change your first statement to:
blockquote {
border:1px solid #ccc;
border-width:1px 0;
margin:20px 0;
padding: 2px 10px;
padding-left:50px;
font-style:italic;
font-size:1.2em;
font-weight:bold;
quotes:'\201C''\201C';
}
See jsFiddle demo
You need to apply the close-quote for the :after pseudo-element. This should take care of your issue.
Here's some sample code:
blockquote:after{
content:close-quote;
font-weight:bold;
font-size:5em;
position:absolute;
color:#ccc;
margin:0 0 0 45px;
font-family:georgia,serif;
font-style:normal;
font-weight:normal
}
As you can see in the image there are some tabs called welcome, aa, bb etc. Now the tab color is blue for an image (tab.png) that I have provided but I want to set a different image or no image at the time of selected. Here Welecome is selected and I have provided an image (tab_selected.png) for selected condition but that image is not rendering. Or If I dont provide any image in selected state, still the tab.png is reflecting. What can I do for this ?
CSS:
#navigation a {
color:#FFFFFF;
display:block;
font:12px Arial, Helvetica, sans-serif;
margin:0 4px 0 0;
padding:3px 10px 4px;
text-decoration:none;
background-image:url(../images/tab.png);
}
#navigation .selected a {
background-image:url(../images/tab_selected.png);
border-bottom:1px solid #e0e0e0;
font-weight:bold;
color:#000;
padding-bottom:3px;
}
Which element are you applying the "selected" class to?
If it is the anchor element (a), then your CSS rule should be:
#navigation a.selected {
Added double quotes for urls. Try this...
Main issue was found by obfuskater
#navigation a {
color:#FFFFFF;
display:block;
font:12px Arial, Helvetica, sans-serif;
margin:0 4px 0 0;
padding:3px 10px 4px;
text-decoration:none;
background-image:url("../images/tab.png");
}
#navigation a.selected {
background-image:url("../images/tab_selected.png");
border-bottom:1px solid #e0e0e0;
font-weight:bold;
color:#000;
padding-bottom:3px;
}
I'm getting stumped here...
I'm trying to vertically align text in a top nav that has two different lines on each li.
Normally, I would take the position:relative + position:absolute route, however, that only works if you set the width of the element.
In my navigation, we don't have a standard width, but need all items aligned by the bottom text.
Here's my code
<div id="menu">
<ul>
<li>first line</li>
<li>Second<br />Line</li>
<li>third Line</li>
</ul>
</div>
Here's the CSS I'm using:
#menu {
margin: 40px auto 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #666666;
float: right;
width:600px;
}
#menu ul {
list-style:none;
list-style-type:none;
height:30px;
}
#menu ul li {
float:left;
margin:0 11px;
padding:5px 0;
}
#menu ul li a {
color:#666666;
text-align:center;
font-size:11px;
display:block;
line-height:1em;
height:30px;
}
As you can see in the second li, there is a linebreak.
What I need is all the items to line up on the bottom, however, I can't use the width element.
Any help would be appreciated... javascript, jquery, are acceptable alternatives as well.
See http://jsfiddle.net/HKAn2/1/ for the updated CSS and sample.
Updated fiddle sample with proper IE7 support: http://jsfiddle.net/HKAn2/3/.
I do not recommend using the CSS hacks in this fiddle example. Instead use an IE7 specific stylesheet to add the asterisked properties. This is just a sample.
Note the changes to
#menu ul li {
display:inline-block; /* this */
margin:0 11px;
padding:5px 0;
*display:inline; /* this - IE7 */
*zoom:1; /* this - IE7 */
}
and
#menu ul li a {
color:#666666;
text-align:center;
font-size:11px;
line-height:1em;
vertical-align:bottom; /* this */
}
Hope this helps.
Edit:
I should further explain that the height property on your a element is no longer a requirement. The a will align to the bottom of the li element based on the li with the largest height.
as you appear to know the height (or optimal height) you could use the length value of vertical-align from vertical-align specs:
<length>
Raise (positive value) or lower
(negative value) the box by this
distance. The value '0cm' means the
same as 'baseline'
and if you make your <a> elements into inline blocks you then lower them by half the height, e.g. as below I took your height value of 30px, and made the links have a line height of 15px for each line then lowered it by 15px, which is 15px from the default middle point.
#menu {
margin: 40px auto 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
font-weight: bold;
font-variant: normal;
color: #666666;
float: right;
width:600px;
background: #eee;
}
#menu ul {
list-style:none;
margin: 0;
padding: 0;
}
#menu ul li {
float: left;
margin: 0 11px;
height: 30px;
background: #dad;
}
#menu ul li a {
color:#666666;
text-align:center;
display: inline-block;
vertical-align: -15px;
line-height: 15px;
}
Working Example : HERE
downside is that I don't think you can get the whole 30px height hoverable, ike if the link was display:block, but maybe someone can expand on this if that's required, maybe it could be achieved by adding a span into the mix?