Hi guys I'm new and making progress in css design. I tried setting the border, margin, padding to 0 of container that has a gray background, but I can't remove the whitespace above, below, left and right. How do I remove it and stretch to fit the browser without extra white space on top, bottom left and right?
Here's what I have so far. Thanks :) http://jsfiddle.net/blackknights/3yhRt/embedded/result/
#charset "utf-8";
/* CSS Document */
#container {
min-width:1024px;
min-height:768px;
background:#CCC;
border:0;
padding:0;
margin:0;
}
#container2 {
width:1080px;
background-color:#FFF;
min-width:1024;
}
#wrapper {
min-width:800;
min-height:600px;
}
#header {
width:900px;
min-height:120px;
background-color:violet;
}
#menubar {
width:900px;
height: 30px;
padding-top:5px;
padding-bottom:5px;
text-decoration: none;
}
ul {
list-style-type:none;
padding:0;
margin:0;
display:inline;
}
li {
list-style-type:none;
background-color:#;
border-right:1px solid #CCC;
float:left;
padding-left:30px; /*adjust space of menu text to each other*/
padding-right:30px;
padding-top:8px;
padding-bottom:8px;
}
a:link {
text-decoration:none;
} /* unvisited link */
a:visited {
text-decoration:none;
} /* visited link */
li:hover {
background-color:#ffd640;
}
ul#mcolor li:hover > a {
background-color:#ffd640; <!-- sets all link color when hovering to yellow -->
}
try:
body{
margin:0px;
padding:0px;
}
Try
body,html
{
min-width: 100%;
}
I agree with #ra_htial
I have updated fiddle for the same
Please refer and reply.
Related
This is my website footer . as you an see it's not well aligned . i just need to align the text . list header and sub listings should come in same alignment . how can i do that ? i've used UL and LI
Since you are using display:inline on the UL elements, all you have to add is vertical-align:top.
You will need the following CSS:
* {
margin:0;
padding:0;
}
#footer {
background-color: rgb(70,221, 93);
height:250px;
padding:40px 0;
width:100%;
}
#footer > div {
text-align:center;
width:24%;
display:inline-block;
vertical-align:top; /* See this line its important for all the 'headers' to align properly */
}
#footer > div > span {
margin:0 0 30px 0;
display:block;
font-weight:bold;
}
a {
display:block;
color:White;
text-decoration:none;
margin-bottom:10px;
}
See this here: http://jsfiddle.net/StARu/
Hope this helps!!!
Hi guys i'm using CSS and i'm still learning div in replace of Table and rows. I'm wondering whenever i attached a background image without background just plain image (transparent background) how come it shows a white background on the website outlook even though its background in photoshop is transparent? how do i remove the white background? please direct me to the right track. Thanks
i tried background-color:transparent; it's not working :(
This is my output image used on css div baclground-image http://postimg.org/image/75t1jgqk3/
THis is the view of image having transparent background in Photoshop http://postimg.org/image/o1jddulcx/
here's my css and html code http://jsfiddle.net/XpCmb/
#charset "utf-8";
/* CSS Document */
body
{
margin:0px;
padding:0px;
}
#container
{
padding:30px;
min-width:1024px;
min-height:768px;
background:#d8e0eb;
border:0px;
margin:0px;
}
#container2
{
width:1000px;
height:730px;
background-color:#FFF;
padding-top:25px;
padding-bottom:15px;
}
#wrapper
{
min-width:800;
min-height:600px;
}
#header
{
width:900px;
height:120px;
background-color:violet;
}
#menubar
{
background-color:#FFF;
width:452px;
height:30px;
padding-top:5px;
padding-bottom:5px;
text-decoration: none;
float:;
}
#content
{
width:1000px;
height:40px;
background-color:#f9f2e0;
}
#contentbody
{
width:1000px;
height:auto;
padding-top:50px;
margin-left:0;
margin-right:0;
background-color:#f9f2e0; /*baclground of content holder body */
padding-bottom:100px; /*adjust the space bottom of content holder text */
}
#contentbodytext
{
margin-left:50px;
text-align:left;
}
ul
{
list-style-type:none;
padding:0;
margin:0;
display:inline;
}
li
{
list-style-type:none;
background-color:#;
border-right:1px solid #CCC;
float:left;
padding-left:30px; /*adjust space of menu text to each other*/
padding-right:30px;
padding-top:8px;
padding-bottom:8px;
}
a:link
{
text-decoration:none;
} /* unvisited link */
a:visited {text-decoration:none;
} /* visited link */
li:hover
{
background-color:#ffd640;
}
ul#mcolor li:hover > a
{
background-color:#ffd640; <!-- sets all link color when hovering to yellow -->
}
ul#mcolor li.active a
{
color: rgb(25, 25, 25);
background-color: #ffd640;
}
#mcolor li.active {
background: none repeat scroll 0 0 #ffd640 !important;
}
/*FOLLOWS ARE MISCELLENEOUS LIKE DIVS image holder etc. */
/*ul:hover li
{
opacity: 0.5;
}
ul li:hover
{
opacity: 1;
}
nk */
#image1
{
padding-left:50px;
float:left;
}
#p1a
{
padding-left:350px;
}
#introductiona
{
padding-right:50px;
text-align:justify;
text-align:justify;
}
#p1
{
margin-left:50px;
text-align:left;
margin-top:70px;
}
#bulletin
{
float:left;
margin-left:10px;
background-image:url(bulletinboard.jpg);
background-size:550px 260px;
background-repeat:no-repeat;
width:550px;
height:260px;
background-color:#f9f2e0;
}
Your image is saved as a jpg, which does not save transparency. Save your image as a PNG or a GIF with transparency and you should fix your problem.
This is my CSS:
/* Navigation Bar */
#linkBar
{
position: relative;
overflow: hidden;
height:24px;
width:999px;
background:#990033;
}
.linkbar ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.linkbar li
{
float:left;
}
.linkbar a:link,a:visited
{
font-size: 14px;
display:block;
width:134px;
font-weight:bold;
color:#FFFFFF;
background-color:#990033;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.linkbar a:hover,a:active
{
background-color:#000000;
}
/* Links */
a:link,a:visited,a:active
{
font-size: 8pt;
font-weight:bold;
color:#990033;
text-decoration:underline;
}
a:hover
{
color:#0000FF;
text-decoration:none;
}
My expected outcome is that links show like:
Which is the case for most of the elements, however the first link on the linkbar ends up like:
Linkbar code:
<div id="linkBar" class="linkbar">
<ul>
<li>Home</li>
<li>Course</li>
<li>Help</li>
</ul>
</div>
I've made a jsfiddle for this
(on jsfiddle i dont get the problem with the first link in the linkbar, so this implies its a problem with the rest of my code?).
I can solve the issue with the navbar if i just change the css around to be:
#linkBar
{
position: relative;
overflow: hidden;
height:24px;
width:999px;
background:#990033;
}
/* Links */
a:link,a:visited,a:active
{
font-size: 8pt;
font-weight:bold;
color:#990033;
text-decoration:underline;
}
a:hover
{
color:#0000FF;
text-decoration:none;
}
/* Navigation Bar */
.linkbar ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.linkbar li
{
float:left;
}
.linkbar a:link,a:visited
{
font-size: 14px;
display:block;
width:134px;
font-weight:bold;
color:#FFFFFF;
background-color:#990033;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.linkbar a:hover,a:active
{
background-color:#000000;
}
But this then means that the visited normal links text color is white - which is not what I want (as some normal links are on light or white backgrounds).
I've made a jsfiddle for this (visited links being white).
Can anyone see what I'm doing wrong / point me in the direction of how to fix it?
Where you have written .linkbar a:link,a:visited you need to repeat the classname before a:visited
Right now you are actually saying '.linkbar link, and then override all a:visited'
So it should be .linkbar a:link, .linkbar a:visited { .. }
I'm using the Yahoo CSS reset, and all of my CSS uses pixel values rather than relative measures like ems. You'll notice that the bottom right corner of the div containing the form is shifted in Chrome from where it is in FireFox.
Check it out:
http://jsfiddle.net/rhewitt/anMmX/
Chrome:
FireFox
/*header style*/
html{
background:url(../Images/textureslice.png) repeat;
}
body {
font-family:Georgia;
color:#93b9bb;
}
/* Links */
li a{
color:#93b9bb;
text-decoration:none;
}
li a:hover {
text-decoration:underline;
color:#6b8f91;
}
/* Navigation Structure */
#nav {
width:920px;
margin:auto;
text-align:center;
padding-top:120px;
list-style-type:none;
}
#outterBox li{
display:inline-block;
padding:0 50px;
position:relative;
}
#linksLeft{
float:left;
border-top:3px solid #93b9bb;
border-bottom:3px solid #93b9bb;
margin:60px 0 0 25px;
padding:5px 0;
}
#linksLeft li ul {
background-color:#93b9bb;
margin-top:10px;
border-radius:6px;
}
#amy {
clear:both;
font-weight:bold;
letter-spacing:6px;
font-size:120%;
}
#talent{
font-size:70%;
}
#logo {
float:left;
background:url(../Images/logocropped.png) no-repeat;
height:134px;
width:160px;
}
#linksRight{
float:left;
border-top:3px solid #93b9bb;
border-bottom:3px solid #93b9bb;
margin-top:60px;
padding:5px 0;
}
/* Subnavigation menu */
#linksLeft li ul li {
display:block;
padding:10px 15px;
text-align:left;
}
#subNav a{
color:#FFF;
}
#subNav {
position:absolute;
left:10px;
top:15px;
z-index:999;
}
#subnavborder {
margin:10px 10px;
border: 6px solid white;
border-radius:6px;
}
#nav ul ul {
display:none;
}
#nav ul li:hover > ul {
display:block;
}
The text size for the browser was set > 100% (not page zoom). This caused the rendering to be wonky on my machine and also explains why it couldn't be replicated by others.
I cant replicate the difference either.
Did you clear cache in chrome? Try reloading by shift+f5.
I assume it should look like the second screenshot.
http://jsfiddle.net/xLTE4/
Adjust the buttons css right propperty and it should be fine in both browsers, at least it works on my end.
Also consider maybe doing this layout without everything being positioned absolutely.
#submitBtn{
position:absolute;
right:45px;
top:430px;
width:80px;
}
I have a very strange image hover problem in Google Chrome.
When I hover the mouse over the menu, I get my background image in Mozilla and IE, but not in Chrome.
I used the following CSS script for the menu item.
.content_resize { padding-right:0; padding-top:16px; width:930px;background-color:#fff; }
.content .mainbar { float:left; width:630px;}
.content .newstick { float:center; width:650px;}
.content .mainbar img { margin-bottom:24px; padding:4px; border:1px solid #b7b7b7; background-color:#fff;}
.content .mainbar img.fl { float:left; margin-right:12px;}
.content .mainbar .article, .content .sidebar .gadget { margin:0; padding:0 0 16px 0;}
.content .sidebar { float:right; width:276px;}
ul.sb_menu, ul.ex_menu { margin:0; padding:0; list-style:none; color:#959595;}
ul.sb_menu li, ul.ex_menu li { margin:0; }
ul.sb_menu li { padding:4px 0; border-bottom:1px solid #e3e3e3; width:220px;}
ul.ex_menu li { padding:4px 0 8px;}
ul.sb_menu li a, ul.ex_menu li a { color:#5f5f5f; text-decoration:none; margin-left:-16px; padding-left:5px;}
ul.sb_menu li a:hover, ul.ex_menu li a:hover { color:#FFFFFF; font-weight:bold; display:block; width:200px ; height:25px; background:url(images/menu_bg.gif) no-repeat left top;}
ul.sb_menu li a:hover { text-decoration:underline;}
ul.ex_menu li a:hover { text-decoration:none;}
.content .scroll { float:left; background:url(images/scroll_bg.gif) no-repeat left top; display:block; margin-left:35px; height:200px; width:180px; OVERFLOW: hidden;background-color:transparent;}
It's working fine with Internet Explorer and Mozilla. While Its not showing up the background image for the menu on hovering in chrome. Can anyone Help me please?
Not too late for me to answer, I hope?
This is happening because display:block; is being triggered on hover, which WebKit doesn't seem to like. It should work if you move the display:block; property from ul.sb_menu li a:hover, ul.ex_menu li a:hover to ul.sb_menu li a, ul.ex_menu li a
While you're at it, it would probably make sense to move width:200px; and height:25px; to the same place as well. This shouldn't affect how it appears in IE, Firefox or Opera, by the way.
You are simply having the same issue as on this thread: chrome does not render gif background image
GIF images are not render correctly by chrome if they are applied on hover (ie. img:hover).
So you have a couple of options:
If your images are not animated: change the format of your images
If your images are animated: use a work around, see answers of question chrome does not render gif background image