I am not a designer but today i am doing an experiment with css
My problem is i want to display an image on my webpage using css only like Here's a link
http://gsg.com.au/solutions/six-drivers-of-sustainable-growth-healthy-brands
Here is my sample code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Pure CSS Popups 2</title>
<style type="text/css">
<!--
body {position: relative; background: black; margin: 0; padding: 0;}
div#links {position: absolute; top: 81px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif;
padding: 5px 10px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #FFC; background:;
border-right: 5px solid #505050;}
div#links #whl1 a:hover {color: #411; background: #AAA;
border-right: 5px double white;}
div#links a img {height: 0; width: 0; border-width: 0;}
div#links a:hover img {position: absolute; top: 190px; left: 55px; height: 50px; width: 50px;}
div#content {position: absolute; top: 26px; left: 161px; right: 25px;
color: #BAA; background: #22232F;
font: 13px Verdana, sans-serif; padding: 10px;
border: solid 5px #444;}
div#content p {margin: 0 1em 1em;}
div#content h3 {margin-bottom: 0.25em;}
h1 {margin: -9px -9px 0.5em; padding: 15px 0 5px; text-align: right;background: #00ff00 url('wheel01.png') no-repeat fixed center;
; color: #667; letter-spacing: 0.5em; text-transform: lowercase; font: bold 25px sans-serif; height: 28px; vertical-align: middle; white-space: nowrap;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
div#content a:visited {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
div#content a:link:hover {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
div#content a:visited:hover {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
code, pre {color: #EDC; font: 110% monospace;}
-->
</style>
</head>
<body>
<div id="links">
<a id ="whl1"><img src="wheel01.png" ></a>
<a id ="whl2"><img src="wheel02.png"></a>
<a id ="whl3"><img src="wheel03.png"></a>
<a id ="whl4" ><img src="wheel04.png"></a>
<a id ="whl5"><img src="wheel05.png"></a>
<a id ="whl6"><img src="wheel06.png"></a>
</div>
</div>
</body>
</html>
But it is not working for me please suggest me how they are doing with some example or ideas thanks
Use the hover pseudo-class.
#foo {
background-image: url('not-hovered.png');
}
#foo:hover {
background-image: url('hovered.png');
}
<div id="links">
<a id ="whl1"></a>
</div>
#links a{
width:123px;
height: 123px;
background: url("your_normal_image.jpg") no-repeat;
display: block;}
#links wh11{
width:123px;
height: 123px;
background: url("your_HOVER_image.jpg") no-repeat; }
Remove <img> from your HTML
Blasteralfred's ans is also R8 but in this case we cant change image, we can jst set opacity of current image
Here you go - a working example: http://jsfiddle.net/kKLKC/
The HTML (in a nutshell):
<p><a class="blue" href="http://www.icanhascheezburger.com"></a></p>
Note that the has been removed from the HTML markup.
The CSS:
a.blue { display:block ;
width:151px ;
height:180px ;
background:url("http://www.digitaldemo.net/blue-bunny.png") no-repeat ;
}
a.blue:hover { background:url("http://www.digitaldemo.net/pink-bunny.png") no-repeat ;
}
You will need to do a CSS set (a.classname and a.classname:hover) for each link.
Related
I have multiple images that take up the entire screen and auto resize (positioned absolutely and some JavaScript) however for the life of me I can not get content to be placed UNDER that div. I put the images in a div container and that div is positioned relative to every other one. The div with the necessary content is relative as well. The images are absolute within a relative div. Can someone take a look at my code and let me know exactly whats going on? I just can't figure it out, and after all the research I have done I do not see why it isn't working. Thank You! Below is the external style sheet and the HTML. I believe the issue is within the actual HTML for div cycler (where the images are), because I embedded the style within the HTML for that div and the content at least does fall under the top divs (defined in style sheet).
#charset "utf-8";
/* CSS Document */
#mainbody
{ margin:0px; padding: 0px; border: 0px; overflow: scroll;}
#topnav.mainnav {
background-color: rgb(27, 89, 127);
height: 45px;
width: 100%;
max-width: 3000px;
max-height: 45px;
border: 0;
margin: 0 auto;
margin-top: -45px;
padding: 0;
text-align: center;
/*box-shadow: 2px 2px 3px 2px #333;*/
display: table; position: fixed;z-index: 4;
}
#linktable.listlink { height: inherit; width: 50%; margin: 0 auto; position: relative; display: table; text-align: center;}
ul {list-style-type: none; margin: 0 auto; padding: 0; overflow: hidden; background-color: rgb(27, 89, 127); height: 45px; width: 760px;}
li {float: left;}
li a.other { display: block; padding-top: 10px; padding-left: 14px; padding-right: 14px; margin: 0; border: 0;
height: 45px; color: #FFF; text-decoration: none; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: 500;
}
li a:hover { background-color: rgb(131, 139, 146); -o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
/* ...and now for the proper property */
transition:.3s }
li a.current { background-color: rgb(238, 237, 240); color: rgb(27, 89, 127); padding-top: 10px; padding-left: 14px; padding-right:14px; margin: 0; border: 0; display: block; text-decoration: none;
height: 45px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: 500;}
#namebar.topname {
background-color: rgb(238, 237, 240);
height: 123px;
min-width: 760px;
width: 100%;
max-height: 123px;
display: block;
position: relative;
border-bottom: 2px solid rgb(131, 139, 146);
margin-top: 45px;
text-align: center;
padding-top: 0px;
}
img.dfrelogo { margin-top: 0px; width: 359px; height: 123px}
img.firstimagehome {width: 100%; max-width: 5472px;min-width:760px; height: auto; box-shadow: 4px 4px 4px #333333; text-align: center;}
#homefirstimage {margin-top: 0px; text-align: center;}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Dean Flint Real Estate!</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="stylesheet/main.css" id="main" media="screen and (min-width: 800px)" type="text/css" />
<link rel="stylesheet" href="stylesheet/mini.css" id="mini" media="screen and (max-width: 799px)" type="text/css" />
<style type="text/css">
#cycler{ position:relative; width: 100%; max-width: 5472px;min-width: 359px; float:left; display: table}
#cycler img{position:absolute;z-index:1;width: 100%; max-width: 5472px;min-width: 359px; height: auto;; text-align: center;box-shadow: 3px 2px 6px #333333; float:left}
#cycler img.active{z-index:3; width: 100%; max-width: 5472px;min-width: 359px; height: auto;text-align: center;opacity: 100; float:left}
</style>
</head>
<body id="mainbody">
<nav>
<div id="topnav" class="mainnav">
<div id="linktable" class="listlink">
<ul>
<li>HOME</li>
<li>AGENTS</li>
<li>FEATURED LISTINGS</li>
<li>CURRENT LISTINGS</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</nav>
<header>
<div id="namebar" class="topname"><img src="images/temp/dfrelogo.jpg" class="dfrelogo" /></div>
</header>
<section>
<div id="cycler">
<img src="images/front_page/frontimage.jpg" />
<img src="images/front_page/frontimage2.jpg" class="active" />
<img src="images/front_page/frontimage3.jpg" />
</div>
</section><br />
<footer>
<div style="position: relative;" ><p>This text should go UNDER the above pictures</p></div>
</footer>
<script type="text/javascript">
function cycleImages(){
var $active = $('#cycler .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(document).ready(function(){
// run every 4s
setInterval('cycleImages()', 6000);
})</script>
</body>
</html>
Do you needed this, '#cycler img{position:absolute}'.
If you remove the absolute position of the 'img' tag in the cycler div, the text will go down as you needed.
#cycler img{z-index:1;width: 100%; max-width: 5472px;min-width: 359px; height: auto;; text-align: center;box-shadow: 3px 2px 6px #333333; float:left}
This will do.
To know about absolute position this is a good short answer.
position: absolute;
This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It won't affect how the elements before it or after it in the HTML are positioned on the Web page however it will be subject to it's parents' positioning unless you override it.
In this snippet, you can see the code.
I want to put mid_left and mid_right in the same div tag mid. but I can' position mid_right right, either out of the mid tag or not in the same level as mid_left. I tried float:left and display:inline-block, but none of them are working, how could I fix it?
/* CSS Document */
body {
margin:0 auto;
padding: 0;
background: url(../img/7_092641_2_meitu_1.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: 15px;
color: #E2E2E2;
line-height: 24px;
font-family: '微软雅黑';
}
.logo {
width: 400px;
hight: 380px;
margin: -610px auto 0 -40px;
position:fixed;
}
.wrapper {
width: 1100px;
height: auto !important;
margin: 0 auto;
background-color:#F7F7F7;
}
.header {
width: 1050px;
height: 100px;
margin: 0 auto;
border: 1px;
/*background-image: url(../../../Stockholm-Sweden.jpg);*/
}
.header h1 {
font-size: 40px;
font-weight: 900;
font-family: '仿宋_GB2312';
margin: 0 auto;
padding-top: 18px;
}
/*------------------ NAV ------------------------*/
.container {
width: 1090px;
height:50x;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
margin: 0 auto;
}
ul {
margin: 0;
padding: 0;
}
ul.menu {
height: 50px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
}
ul.menu li {
list-style: none;
float:left;
height: 49px;
text-align: center;
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
ul li a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 49px;
font-size: medium;
font-weight: bold;
color: #FFF;
font-family: '微软雅黑';
text-decoration:none;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}
ul li a:hover {
background: transparent none;
}
ul li.active a{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
/*------------ slider ---------------*/
.slider_1 {
height: 400px;
width: 1090px;
margin: 20px auto 0 auto;
overflow: hidden;
}
/*----------- mid ------------------*/
.mid {
height:auto;
width:1000px;
margin:0 auto;
font-family:'仿宋_GB2312';
border: solid 1px #CCCCCC;
}
.mid a {
text-decoration: none;
}
.mid_span {
height:45px;
line-height:45px;
color:#004276;
font-size:18px;
font-weight:bold;
margin-right:6px;
}
.mid_left {
height: auto;
width: 490px;
margin: 0 auto 0 5px;
border-right: dashed #F2F2F2;
diaplay: inline-block;
}
.mid_right {
height: auto;
width: 480px;
margin: 0 10px 0 auto;
}
.mid_left_1 {
width: 100%;
height: auto;
margin: 0 auto;
}
.date {
color: #CECECE;
line-height:22px;
font-size: 12px;
}
.detail {
color:#BA2636;
}
.brif {
color:#454545;
line-height:22px;
margin-top: -5px;
}
.tittle {
height:80px;
width:1050px;
margin: 20px auto 10px auto;
text-align: center;
}
.tittle h2 {
font-family:'微软雅黑';
font-size: 24px;
font-weight: bold;
color: #292c2f;
display: inline-block;
}
.tittle_line{
background: url(../img/title_line.png) no-repeat;
width: 350px;
height: 8px;
margin: 0 10px 5px 10px;
display: inline-block;
}
footer {
width:1050px;
height:auto;
margin: 0 auto;
posion: absolute;
}
.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 10px 25px 5px 25px;
margin-top: 80px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 40%;
margin-left: 40px;
}
/* The company logo */
.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
}
.footer-distributed h3 span{
color: #5383d3;
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: #5383d3;
text-decoration: none;;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 20%;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 12px;
margin-bottom: 5px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旅游导航</title>
<meta name="description" content="北欧旅游" />
<meta name="keywords" content="各种索引条目" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/pgwslider.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div><!-- header -->
<div class="container">
<ul class="menu">
<li>HOME</li>
<li>ABOUT</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</div><!--navigation -->
<div class="tittle">
<div class="tittle_line"></div>
<h2>EXAMPLE</h2><div class="tittle_line"></div>
</div><!-- tittle -->
<div class="mid">
<div class="mid_left">
<div class="mid_left_1">
<a target="_blank" href="#" title="投资移民瑞典能享受欧盟待遇吗？" class="mid_span">投资移民瑞典能享受欧盟待遇吗？</a>
<span class="date">(02/11 14:50)</span> <br>
<p class="brif">投资移民瑞典能享受欧盟待遇吗？获得欧盟成员国的国籍，也意味着被整个欧盟接纳，直接成为欧盟公民，享受整个欧盟范围内的各种优待，包括经商，接受教育，找工作，都能够享受欧盟优先的原则。...<span class="detail">[</span>详细<span class="detail">]</span></p>
</div><!--med left 1 -->
<div class="mid_left_1">
<a target="_blank" href="#" title="一步到位获得瑞典移民身份享福利" class="mid_span">一步到位获得瑞典移民身份享福利</a>
<span class="date">(02/11 14:50)</span> <br>
<p class="brif">一步到位获得瑞典移民身份享福利。瑞典移民者在获得身份的同时，就能即刻享受福利，而一些国家规定则没有这么宽松，比如澳洲商业移民，在获得4年期的临时商务签证的期间，必须成功经营企业才能进一步申请转为移民，而...<span class="detail">[</span>详细<span class="detail">]</span></p>
</div><!--med left 1 -->
<div class="mid_left_1">
<a target="_blank" href="#" title="瑞典移民福利“一辈子都很幸福”" class="mid_span">瑞典移民福利“一辈子都很幸福”</a>
<span class="date">(02/11 14:50)</span> <br>
<p class="brif">瑞典移民申请材料有哪些，如果您计划到瑞典与您的丈夫、妻子、同居伴侣或者您的孩子或者其他近亲属长期居住，那么就应当了解申请居留许可之前要准备哪些申请材料。...<span class="detail">[</span>详细<span class="detail">]</span></p>
</div><!--med left 1 -->
<div class="mid_left_1">
<a target="_blank" href="#" title="欧洲各国移民福利大比拼 " class="mid_span">欧洲各国移民福利大比拼 </a>
<span class="date">(02/11 14:50)</span> <br>
<p class="brif">欧洲各国移民福利大比拼。2015年，欧洲移民政策将更加成熟稳定，也将受到市场更广泛的认可。下面就随小编来看看欧洲各国移民福利吧！看看有没有适合您的那一款。...<span class="detail">[</span>详细<span class="detail">]</span></p>
</div><!--med left 1 -->
</div><!--mid left -->
<div class="mid_right">
23t2erse452
</div>
</div><!--mid-->
<footer class="footer-distributed"><!--footer-->
<div class="footer-left">
<h3>Feito<span>AB</span></h3>
<p class="footer-company-name">Feito AB © 2015</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>Mejerigatan 29</span> Göteborg</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>+1 555 123456</p>
</div>
</div>
<!--
<div class="footer-right">
<div>
<i class="fa fa-envelope"></i>
<p>support#company.com</p>
</div>
</div>
-->
<div class="footer-right">
<div class="footer-icons">
<a href="#">
<img src="img/footer/1.jpg" alt="facebook">
</a>
<img src="img/footer/2.jpg" alt="facebook">
<img src="img/footer/3.jpg" alt="linkedin">
<img src="img/footer/4.jpg" alt="mewo">
</div>
</div>
</footer><!--footer-->
</div><!--wrapper-->
</body>
</html>
set .mid position to relative, and mid_left and mid_right position to absolute. Then mid_left and mid_right will stack on top of each other, with mid_right being on top since it appears later in the HTML.
Make sure you understand how the box model works.
http://www.w3schools.com/css/css_boxmodel.asp
When you add attributes like border and padding, it effectively adds to the width of your box.
So, having a container div with 1000px, you need to make sure of 2 things:
If you want to have 2 divs inside that container with 500px width (one left, one right) ensure that your width + border + padding does not exceed the 500px limit.
When using inline-blocks, there might be the scenario where a white space renders between your two blocks, effectively pushing the 2nd one right by a few pixels. If you have control over the HTML, make sure no white spaces exist between your left and right div. If you cannot control this, you can give the containing element font-size: 0px; and then just reset your font size inside the left and right elements (for instance 16px).
adding display: inline-block; for both .mid_left and .mid_right classes works perfectly for me. Also check, if you didn't have space between these two divs.
To use your current code, make these adjustments:
Correct the spelling of display from diaplay:
.mid_left {
display: inline-block;
}
And then add display: inline-block; to .mid_right.
Here is an example: JSFiddle.
Hope this solves your issue.
you have a couple of options
flexbox . depending on browser support . if you have IE10+ then this is the way to go
display: table on parent and display: table-cell on left/right container
keep the container with the biggest height in the page flow and position: absolute the second container . then add height: 100% on the positioned container
I'm trying to create a square centered page at min. 600px height. The page should expand together with the text. (Ofc.)
The page also have some picture based borders, which should follow the page. (Obviously.)
I've tried a million combinations by now, I think. The problem seems to be that the div-borders cannot auto adjust if the outer div doesn't have a fixed height. And the outer div cannot have a fixed height, due to expanding text.
It seems simple enough. And there're a lot of suggestions. (That doesn't work.) Have I done something fundamentally wrong?
Here's the page: http://bymosegaard-hillerod.dk/info.aspx
(Notice that the borders doesn't reach the bottom.)
For future reference. Here's the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>...</title>
<link href="..." rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="topborder"></div>
<div id="leftborder"></div>
<div id="page">
<div id="pageheadtext">...</div>
<div style="float: right; margin-top: 30px;"><img src="/media/banner.jpg"></div>
<div id="menubar" style="margin-top: 210px;">
...
</div>
<div id="sideNavigation"></div>
<div id="bodyText" style="margin-top: 20px;">
...
</div>
</div>
<div id="rightborder"></div>
<div id="bottomborder"></div>
<div id="footer">...</div>
</div>
</body>
</html>
And the stylesheet:
BODY
{
background-color: rgb(248, 248, 243);
background-image: url(/media/bodyBg.gif);
background-repeat: repeat-x;
color: rgb(102, 102, 102);
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10px;
height: 95%;
}
H1
{
font-family: Verdana, Arial;
font-size: 14px;
color: #333;
font-weight:normal;
}
#pageheadtext
{
margin-top: 40px;
margin-left: 35px;
font-family: Verdana, Arial;
font-size: 14px;
color: #333;
text-align: left;
}
#container
{
margin: 0 auto 0 auto;
width: 786px;
overflow: hidden;
min-height: 600px;
}
#topborder
{
background-image: url(/media/frameTopBg.png);
background-repeat: no-repeat;
display: block;
height: 8px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
}
#leftborder
{
float: left;
background-image: url(/media/frameLeftMiddleBg.png);
background-repeat: repeat-y;
width: 13px;
min-height: 600px;
height: auto;
}
#page
{
background-color: white;
display: block;
float: left;
height: 100%;
margin-left: 0px;
text-align: left;
width: 760px;
}
#rightborder
{
float: right;
background-image: url(/media/frameRightMiddleBg.png);
background-repeat: repeat-y;
width: 13px;
min-height: 600px;
height: 100%;
}
#bottomborder
{
background-image: url(/media/frameBottomBg.png);
background-repeat: no-repeat;
clear: both;
display: block;
height: 13px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
}
#menubar
{
background-image: url(/media/menubar.jpg);
background-repeat: no-repeat;
display: block;
height: 27px;
width: 760px;
}
#topmenuitem
{
color: rgb(102, 102, 102);
cursor: auto;
line-height: 24px;
outline-color: rgb(102, 102, 102);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 3px;
padding-right: 3px;
padding-top: 0px;
text-decoration: none;
}
#sideNavigation
{
float: left;
font-family: Arial, Verdana, Helvetica, sans-serif;
margin-left: 35px;
margin-top: 32px;
}
#bodyText
{
float: right;
margin-right: 194px;
width: 400px;
height: 100%;
}
#footer
{
text-align: center;
}
#doctable
{
font-size: 10px;
}
Btw, the page is CMS driven, so I cannot just hack the one offending page. And I would really like to solve this in general.
Your CSS is over complicated, the HTML structure also, not to talk that the design is oldish and the font is hardly readable. And over all that you spiced it using inline styles... This will only lead to to fix a fix of a fix, and not to answer a client call to do just a simple edit / modification.
Hardly maintainable. Keep it simple.
Believe it or not this is all you need:
jsBin demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My page</title>
</head>
<body>
<div id="container">
<h1>Bymosegård i Hillerød</h1>
<img src="http://bymosegaard-hillerod.dk/media/banner.jpg">
<nav>
<ul>
<li>Forside</li>
<li>Info</li>
<li>Regnskaber</li>
<li>Referater</li>
<li>Kontakt</li>
</ul>
</nav>
<div id="content">
<h2>Foretningsorden, relementer mm.</h2>
<p>Foretningsorden, relementer, vedtægter mm.</p>
<p> </p>
<h3>Vedtægter</h3>
................. etc
</div>
</div>
<div id="footer">Bymosegårds Alle 3-9, 3400 Hillerød</div>
</body>
</html>
CSS:
*{ margin:0; padding:0; } /* Global reset */
body{
background:#EEEDE4;
font: 10px/1.4 Helvetica, Arial, Verdana, sans-serif;
color: #666;
}
h1, h2, h3, p, ul, ol{
margin: 7px 30px;
font-weight:200;
}
h1{
color:#333;
font-size:1.5em;
padding:25px 0
}
ul, ol { padding-left:1.4em; }
nav { background: #E9E9E9; }
nav li { display:inline-block; }
nav li a{ display:inline-block; padding:5px 15px; }
#container > img{ width:100%; }
#container{
position:relative;
margin: 15px auto;
width: 786px;
background: #fff;
padding:10px;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
#content{ margin:30px 100px; }
#footer{ text-align:center; }
firstly I just would like to put out there I'm not very good at coding, and this is sorta a first for me. I'm having some trouble with the footer; the background of the footer, when it's too small for bigger computer screens, just repeats itself like this: http://prntscr.com/29fxeu
I was hoping to get the background so that it automatically adjusts to each screen width to fit the whole way across. Is that possible? I've got it up on JSFiddle here: http://jsfiddle.net/HXs2A/1/
And here's the HTML used: (forgive me if there's errors)
<body>
<!-- Footer border Start-->
<div id='footer-wrapper'>
<div style='clear:both;'/>
</div>
<!-- Footer border End-->
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 1' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 2' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 3' preferred='yes'/>
</div>
<div style='clear: both;'/>
</div>
</div>
</body>
And the CSS:
#footer-wrapper {clear: both;width: 100%; height:4px; background: #46A28D;}
/*----- Three Column Widget (Green Border) STARTS-----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
height:120px;
background: url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png) repeat scroll 0 0 #222222;
}
#lower-wrapper {
background: none; repeat scroll 0 0 #222222;
margin:auto;
padding: 20px 0px 20px 0px;
width: 100%;
border:0;
}
#lowerbar-wrapper {
background: none; repeat scroll 0 0 #222222;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 30%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#46A28D;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0px !important;
padding: 0px;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}
Thanks!
to #lower
add
background-size: 100% 100%;
and remove height:120px; as it will force background to stretch on odd ratio screen.
You mean background-size? Following code change works for me (CSS3).
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
height:120px;
background: url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png);
background-size:100% 100%;
background-repeate: no-repeat;
}
See http://www.w3schools.com/css/css3_backgrounds.asp
However, older browsers might give different results.
#lower {
margin:auto;
padding: 0;
width: 100%;
height: 120px;
background: #222222 url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png) no-repeat;
background-size: cover;
}
*Note: When you assigning attributes to element in HTML use " instead of '
Right <div id="lower">
Wrong <div id='lower'>
very new to code and all this, i am trying to make a simple page with html and css for class. Basically the problem is there is a space between the picture div and the menu div, you can see if you check out my code, also if there is anything that i really don't need, it would be really helpful to point it out. Also i am making this in Chrome. Cheers :)
PS. I am only showing one page of the html so the links wont work.
Here the link to jsFiddle.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cristiano Ronaldo</title>
<link rel="stylesheet" type="text/css" href="../realstyle.css" />
</head>
<body>
<div id="contentwrap">
<div id="languagebar">
<ul id="languagelist">
<li id="Ronaldo">CRISTIANO RONALDO</li>
<li>Português</li>
<li>English</li>
</ul>
</div> <!--languagebar-->
<div id="bigpic">
<a href="http://www.realmadrid.com/cs/Satellite/en/Home.htm">
<img id="Madrid" border="0" src="../GalleryI/Madrid.jpg" width="100" height="100px" />
</a>
<a href="http://www.manutd.com/Splash-Page.aspx">
<img id="United" border="0" src="../GalleryI/United.jpg" width="120" height="100px" />
</a>
</div> <!--bigpic-->
<div id="menubar">
<ul id="menubarlist">
<li>Home</li>
<li>Early Life</li>
<li>Clubs</li>
<li>Records/medals</li>
<li>Personal Life</li>
</ul>
</div> <!--menubar-->
<div id="content">
</div> <!--Content-->
</div> <!--contentwrap-->
</body>
</html>
CSS
body {
background-image: url("GalleryI/Background.jpg");
width:100%;
margin:0;
padding:0;
}
A:hover {text-decoration: none; color:#CD2626;}
a:link {color: White; text-decoration: none;}
a:visited {color: White; text-decoration: none;}
#contentwrap {
text-align:center;
white-space: nowrap;
width: 50%;
margin-left: auto;
margin-right: auto;
background-color: red;
}
#languagebar {
width:800px;
height:30px;
background-image: url("GalleryI/languagebaricon.jpg");
background-repeat: no-repeat;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
margin:0 auto;
}
#languagelist li {
display:inline;
list-style:none;
position: relative;
line-height:25px;
padding: 2px 10px 0px 10px;
color:#CD2626;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
float: right;
}
#languagelist li a:hover{
color:#CD2626;
}
#bigpic {
width:800px;
height:100px;
background: #fff;
background-image: url("GalleryI/Jersey1.jpg");
background-repeat: no-repeat;
background-position: 190px -155px;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
margin:0 auto;
}
#menubar {
width:800px;
height:40px;
background-image: url("GalleryI/menuicon.jpg");
background-repeat: no-repeat;
padding:0;
white-space: nowrap;
list-style:none;
font-family: Impact, Arial, sans-serif;
text-transform:uppercase !important;
font-size: 16px;
margin:0 auto;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
}
#Madrid {
float: left;
}
#United {
float: left;
}
#content {
width: 800px;
height: 726px;
background-color: #FFF;
color: white;
font-size: 18px;
text-align:center;
font-family: arial,sans-serif;
color: white;
margin:0 auto;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
}
li#Ronaldo {
line-height:25px;
padding: 2px 25px 2px 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: white;
float: left;
font-weight: bold;
}
ul#menubarlist li {
display:inline;
position: relative;
letter-spacing:2px;
line-height:35px;
padding: 0px 25px 0px 25px;
color:#CD2626;
}
ul#menubarlist li a:hover{
color:#CD2626;
}
ul#list-nav li a {
text-decoration:none;
color:#ffffff;
}
Just remove this:
#languagebar{
border-left:1px solid #FFFFFF;
}
There is a white space because you have a border!
Edit:
If you mean the gap between the images, see http://jsfiddle.net/GZ8ZT/5/
Just add
#bigpic{font-size:0}
And if you want to add text inside bicpic, you will also need
#bicpic>*{font-size:16px} /* Or your default font-size value */
Remove this
border-left:1px solid #FFFFFF;
from *css #languagebar *