I would like to get a horizontal scroll bar involved when my page hits its breaking point and elements start to escape their divs. I set my header as an inline background image but... well you know, it stays where it is of course and moves out side the div. there is no response when the window gets too small. Help!
#logo {
background-repeat:no-repeat;
background-position: top center;
background-size: 100%;
}
#mainnavi {
border-top:inset gold 3px;
background-color:#000033;
border-bottom:inset gold 3px;
height:45px; text-align:center;
font-size:13px;
width:100%;
text-shadow:20%;
}
a:link,a:visited {
font-weight:bold;
display:inline-block;
color:#FFFFFF;
background-color:#000033;
text-align:center;
height:30px;
width:120px;
text-decoration:blink;
overflow:hidden;
}
a:hover,a:active {
background-color:#000099;
}
that is what i have going on for the navigation and my logo.
Related
I want the whole div clickable, but it will not show. I want it to change when hovered as well. I believe I have used this same coding before and it has worked, not sure why I am having issues.
<div class="clickable_one">
</div>
div.clickable_one {
float:right;
}
div.clickable_one a {
position:absolute;
width:120px;
height:30px;
text-decoration:none;
background-image:url("images/forums_link copy.png");
}
div.clickable_one a:hover {
position:absolute;
width:120px;
height:30px;
text-decoration:none;
background-image:url("images/forums_link_2 copy.png");
}
The problem is you are using float:right on your div and position:absolute on your <a> which forced everything to move on right corner of screen. If you use InspectElement you will have clear view. I placed a border around your div as example to check location of div
I'v updated your CSS a bit and content is showing.
div.clickable_one
{
border: 2px solid blue;
}
div.clickable_one a {
width:120px;
height:30px;
text-decoration:none;
background-image:url("images/forums_link copy.png");
}
div.clickable_one a:hover
{
width:120px;
height:30px;
text-decoration:underline;
background-image:url("images/forums_link copy.png");
}
DEMO
I am designing a website, and I want to have a nav bar that resizes to the size of the screen.
This is what I have right now for html:
<nav>
Item 1
Item 2
Item 3
Item 4
</nav>
and css:
nav a {
text-decoration:none;
font-size:2em;
color:#fff;
width:25%;
display:block;
float:left;
background-color:#000;
text-align:center;
}
http://jsfiddle.net/GJVqR/
This works fine until the screen gets down to a certain size at which point I want the menu items to stack on top of each other.
Is there a way to do this without resorting to JS?
EDIT: After receiving a few answers I feel I need to clarify: http://i.stack.imgur.com/9ID5N.png
This is what I am looking for when the screen gets too small.
Set the
min-width
CSS property:
nav a {
min-width: 100px;
text-decoration:none;
font-size:2em;
color:#fff;
width:25%;
display:block;
float:left;
background-color:#000;
text-align:center;
}
You may use min-width instead width, and have them float or not :
http://jsfiddle.net/GJVqR/2/ http://jsfiddle.net/GJVqR/3/
nav a {
text-decoration:none;
font-size:2em;
color:#fff;
min-width:25%;
display:inline-block;
float:left;
background-color:#000;
text-align:center;
}
I found a solution using the #media css
#media (max-width:21.5em){
nav a {
width:100%
}
}
http://jsfiddle.net/GJVqR/4/
I'm bulding a Wordpress site that has a "box" for the main article. This is build using CSS and several Divs around the article. This all works fine, the only problem is that when I need a scroll bar, it apears outside of the right box border.
See for yourself (with awesome perfect red circle around it!).
Basically, I want it to stay IN the article, so in the left side of the last image (the right side border). I read around the internet, and I found that you can reverse the scroll bar using dir="rtl", but that will reverse all the scroll bars, and thats not really what I want.
[EDIT - To make it clear, I don't want it in the left side of the article itself, just inside the box on the right side of the text. This is sort of what I want, but as you see, it messes up the article box. I want it sort of in that position, but without screwing up the article.]
[End edit]
This is the CSS (this comes from a modded template, so excuse me if there are obvious errors):
.article {
margin-bottom:20px;
}
.article-corps-title {
background:url(images/article_sprite.png) no-repeat;
background-position:0 -17px;
min-height:70px;
max-height:142px;
position:relative;
}
.page-corps-title {
display:block;
/*background:url(images/article_sprite.png) no-repeat;
background-position: 13px -65px;*/
background:url(images/articlebox.png) no-repeat;
background-position:15px 0px;
height:80px;
}
.article-top {
position:absolute;
top:13px;
right:25px;
}
.article-top a {
display:block;
font-size:10px;
font-weight:700;
color:#aaa;
text-decoration:none;
padding:4px 12px 0 0;
background:url(images/icons.png) no-repeat;
background-position:top right;
}
.article-date {
position:absolute;
left:11px;
top:26px;
display:block;
width:40px;
text-align:center;
}
.article-date .month {
font-size:13px;
font-weight:700;
line-height:15px;
color:#FFF;
text-transform:uppercase;
}
.article-date .day {
font-size:22px;
font-weight:700;
color:#FFF;
}
h2.page-title {
text-align:center;
font-size:26px;
font-weight:700;
padding-top:10px;
padding-bottom:15px;
color:#000000;
text-shadow:#CCC 0 0 2px;
max-width:565px;
}
h2.article-title {
font-size:26px;
font-weight:700;
margin-left:80px;
padding-top:30px;
color:#ce0709;
text-shadow:#CCC 0 0 2px;
max-width:565px;
}
h2.article-title a, h2.page-title a {
color:#ce0709;
text-decoration:none;
}
h2.article-title a:hover,h2.page-title a:hover {
color:#E00
}
.article-meta-autor {
font-size:11px;
color:#aaaaaa;
margin-left:80px;
background:url(images/icons.png) no-repeat;
background-position:left -15px;
padding:4px 0 4px 20px;
max-height:11px;
line-height:14px;
}
.article-meta-autor a, .article-meta-keywords a, .article-meta-comments a {
color:#aaaaaa;
text-decoration:none;
font-weight:700;
}
.article-meta-autor a:hover, .article-meta-keywords a:hover, .article-meta-comments a:hover {
text-decoration:underline;
}
.article-corps {
position:relative;
/*background:url(images/article_sprite.png) repeat-y;
background-position:-683px 0px;*/
background:url(images/articleboxmiddle.png) repeat-y;
background-position:-5px 0px;
/*min-height: 250px;*/
height:300px;
margin-left:20px;
padding:13px 43px 0px 50px;
line-height:20px;
overflow:auto;/*hidden;*/
}
.article-read-more {
margin:0px auto;
width:164px;
padding-bottom:15px;
}
.article-read-more a {
display:block;
width:156px;
height:26px;
text-align:center;
padding-top:9px;
background:url(images/read_more.png) no-repeat;
background-position:top left;
font-weight:700;
color:#FFF;
text-decoration:none;
text-transform:uppercase;
}
.article-read-more a:hover {
background-position:bottom left;
}
.article-meta-keywords {
position:absolute;
bottom:0;
left:50px;
background:url(images/icons.png) no-repeat;
background-position:0 -34px;
padding-left:20px;
font-size:11px;
color:#aaa;
max-height:20px;
max-width:450px;
overflow:hidden;
}
.article-meta-comments {
position:absolute;
bottom:0;
right:45px;
background:url(images/icons.png) no-repeat;
background-position:0 -54px;
padding-left:20px;
font-size:11px;
color:#aaa;
}
.article-meta-keywords a {
color:#aaa;
font-weight:700;
text-decoration:none;
}
.article-meta-keywords a:hover {
text-decoration:underline;
}
.article-footer {
display:block;
/*background:url(images/article_sprite.png) no-repeat;
background-position:14px -15px;*/
background:url(images/articlebox.png) no-repeat;
background-position:15px -420px;
height:45px;
}
Thank you.
use dir="rtl" to give direction to the text. The scrollbars will appear to the left.
Then use dir="ltr" to the inside elements such as p, div etc to nullify the effect. This way, dir="rtl"
Here is the fiddle - http://jsfiddle.net/ashwyn/dcLQQ/
I works in Firefox though, but in my chrome it doesn't.
[Edit]
Below is the fiddle to shift the scrollbar slightly to the left-
http://jsfiddle.net/ashwyn/fPGy8/1/
I don't think there is any other solution that you can fix apart from the above.
this is not a solution to your problem but just a suggestion:
be aware that you're going against the standard behaviour your users would expect - a scrollbar always appears on the right for left-to-right languages, and this could be bad usability. As you are not creating a site that requires RTL, it would be better to not change the standard browser behaviour.
You haven't given enough code (structure) for me to give a specific answer, but it looks as though you could just narrow the div that contains the article.
I'm designing a fairly simple web site but as I don't have much experience I have a very simple question.
I've done the layout in a way that displays all the necessary information without the need of scrolling down. But for some reason it's there.
The site's css is as following:
#charset "utf-8";
/* CSS Document */
html {height:100%;width:100%; margin:0;}
body{
height:65%;
font-size:100%;
font-family:Calibri;
background-image:url(/images/gradient.png);
background-repeat:repeat-x;
background-color:#FFF0;
color:#00080;
margin-left:15%;
margin-top:3%;
margin-right:15%;
width:65%;
}
#banner {
height:40%;
background: url(/images/banner.jpg) right scroll no-repeat;
}
#left_container{
width:20%;
height:80%;
}
#left_container img{
width:100%;
}
a{
text-decoration:none;
color:#FFF;
border:none;
}
#menu{
width:100%;
height:85%;
font-size:120%;
}
#menu td{
background:#999;
color:#FFF;
padding:4%;
}
#menu tr td a:hover{
background:#CCC;
color:#333;
}
#right_container{
width:75%;
height:auto;
position:relative;
left:+26%;
top:-80%;
}
#right_container h2{
font-size:300%;
}
#right_container h3{
font-size:200%;
}
But the web site looks like this (and the scroll appears when I set the right_container h2 title (home) size in the css bigger than 190%....but I need it to be as I set...or it will be to small).How can I remove the scroll bar?
image -> http://i29.tinypic.com/hx3uy8.jpg
You can control the appearance of scrollbars in CSS by using the Overflow property. So you could try adding overflow: hidden to your BODY CSS declaration and see if that helps.
I need to have a single <li> element which has two buttons inside of it as follows:
<li>
The title
</li>
With a layout of the button similar to the following:
____________
|_________|__|
The background would span the entire button, the <a> tag on the left would be filled with text, the one on the right with an alpha transparent button to overlay the background of the <li> element. This is the CSS I've got.
#left ul#main-menu li.li-add a {
display:block;
padding:4px 6px 6px 6px;
text-decoration:none;
color:#fff;
font-size:12px;
margin:0;
}
#left ul#main-menu li.li-add {
height:25px;
margin:0;
padding:0;
background: url('button_back.gif') no-repeat;
}
#left ul#main-menu li.li-add a.left {
width:106px;
float:left;
padding:5px 6px 6px 6px;
}
#left ul#main-menu li.li-add a.left:hover {
background: url('button_back_hover.gif') no-repeat;
}
#left ul#main-menu li.li-add a.right {
float:left;
text-align:center;
font-size:16px;
padding:4px 0 0 0;
margin:0;
height:21px;
width:27px;
font-weight:bold;
}
#left ul#main-menu li.li-add a.right:hover {
background: url('button_back_hover.gif') no-repeat center right;
}
I'm doing a similar thing with all the other list items, except they don't have the "add" button on the right hand side. The problem I'm having is that a two pixel gap is being introduced pushing the other <li> elements down. I'm not sure what I'm doing wrong really. I can do margin-bottom:-2px but all that does is make an area of 2 pixels which isn't clickable in the element below.
EDIT
It was the float actually.
#left ul#main-menu li.li-add a.right {
float:left;
text-align:center;
font-size:16px;
padding:4px 0 0 0;
margin:0;
height:21px;
width:27px;
font-weight:bold;
}
float:left shouldn't have been in there, for some reason doing this causes an extra gap to be created. shrug.
I think your li problem is a red herring. I was able to have the list layout nice and tight by adding:
height: 14px; /* Add to '#left ul#main-menu li.li-add a.left' */
You never specified a height for the left a tag, it's auto height was taller than the 25px specified for the .right a tag. You are setting a height on the li tags, but they are inline elements, not block elements as you've made the a tags. Only block elements can have specified heights. Hope this helps.
Good luck!