This is now the complete html/CSS because someone aked for it.
This is an updated version but it still does not work! I run this on a localhost (usbwebserver).
I am trying to use a background-image for a div but it will not show the image.The image is in the Images file.
html:
<!DOCTYPE html>
<html>
<head>
<title>Computing</title>
<link rel="stylesheet" type="text/css" href="css/CSS.css">
<link rel="shortcut icon" href="Images/laptop.ico" />
</head>
<header class="Header">
<div class="logo" onClick="location.href='Home.html'"> </div>
<h1>Computing</h1>
</header>
<body>
<div class="opvulling1"></div>
<div class="buttonA">Home</div>
<div class="button" onClick="location.href='Laptops.php'">Laptops</div>
<div class="button" onClick="location.href='Cameras.php'">Camera's</div>
<div class="button" onClick="location.href='gsms.php'">GSM's</div>
<div class="button" onClick="location.href='Contact.html'">Contact</div>
<div class="button" onClick="location.href='Winkelwagen.php'">Winkelwagen</div>
<div class="opvulling2"></div>
<div class="Central">
<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacus augue, aliquam ut gravida eget, adipiscing in elit. Suspendisse potenti. Integer laoreet, risus nec fermentum imperdiet, leo magna interdum eros, eu aliquam turpis risus eget nulla. Vivamus ultrices urna vitae nisl vestibulum cursus. Suspendisse sed gravida libero. Fusce blandit dui id porttitor sodales. Morbi vitae sapien quis nulla gravida dignissim. Donec pharetra ipsum tellus, sed laoreet dui viverra in. Nullam blandit diam ac quam consectetur consectetur. Nulla facilisi. Nam ut quam diam. Nunc nec nisl ut tortor luctus commodo. Fusce nec velit neque. Vivamus ac dui tempor, malesuada lacus sed, sollicitudin odio. Nullam ac adipiscing velit, sed dapibus mauris. Sed et egestas dolor.</section>
<section>Phasellus non interdum nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sed convallis nisi. In in tellus eleifend, tincidunt metus et, auctor mauris. Nullam risus libero, condimentum in adipiscing elementum, tincidunt ut elit. Sed eu diam sed erat aliquam convallis in a mauris. Cras at enim condimentum dolor consequat consequat. Nulla mattis leo in justo molestie, nec tincidunt nulla consequat. Duis accumsan congue lacus sit amet vehicula. Duis vitae pretium urna. Donec sodales, risus id auctor tempor, nisi nisi vehicula dui, in aliquam ante arcu sit amet dui. Curabitur fringilla cursus erat, id lobortis neque aliquet a. Etiam et pharetra diam.</section>
</div>
css:
body{
background-color:#CAEAED;
}
.logo{
background-image:url('Images/Computing.jpg');
height:100px;
width:200px;
}
.Central{
background-color: #FFFFFF;
width: 50%;
margin-top: 50px;
margin-left:20%;
height: auto;
padding: 1%;
font-family:Arial;
font-size: 16px;
}
.Header{
background-color: #CAEAED;
margin-top:-10px;
margin-left:-10px;
width: 101%;
position:relative;
height: 5%;
padding-top:1px;
padding-right: 1%;
text-align:center;
}
h1{
font-size:30px;
font-family:Arial;
text-align: center;
}
section{
padding: 1%;
}
.button{
background-color:#009999;
font-family:Arial;
font-size: 16px;
position:relative;
float:left;
margin-top: 2px;
margin-right:2px;
height:20px;
padding:5px;
}
.buttonA{
font-family:Arial;
font-size: 16px;
background-color:#015965;
transition: width 2s;
margin-top: 2px;
position:relative;
float:left;
margin-right:2px;
height:20px;
padding:5px;
}
.opvulling1{
background-color:#009999;
float:left;
margin-left:-10px;
margin-top: 2px;
margin-right:2px;
height:20px;
padding:5px;
width:20%;
}
.opvulling2{
background-color:#009999;
float:left;
margin-top: 2px;
margin-right:-2000px;
height:20px;
padding:5px;
width:1200px;
}
.button:hover{
cursor:pointer;
background-color:#1F6B75;
font-family:Arial;
font-size: 16px;
}
img{
height: 250px;
width: 300px;
}
h3{
font-family:Arial;
}
form{
float: left;
margin-left: 20px
}
td{
width:40%;
text-align:center;
}
.Prijs{
float:left;
}
.article{
position:relative;
float:left;
margin-right:20px;
background-color:white;
}
h2{
font-family:Arial;
}
How can I make the image work? I already searched it on the internet but i can't find it anywhere. Someone please help.
change \ with /
.logo{
background-image:url('Images/Computing.jpg');
}
If you don't see the image try to put the dimension of the image for example if is 200*300 try this:
.logo{
width:200px;
height:300px;
background-image:url('Images/Computing.jpg');
}
You're using a backslash instead of a regular slash.
background-image:url('Images\Computing.jpg');}
^
^
background-image:url('Images/Computing.jpg');}
This is supposed to work if the image is indeed in the specified location.
If you have your site on Linux, you should be aware that on the server site, file names are case sensitive (Computing.jpg not equal computing.jpg). Pay attention the file name is same as the css reference.
Good luck!
Use:
background-image:url('../Images/Computing.jpg');
Your CSS is called in a relative way this requires you to specify your path relative to your CSS file.
you should use background-image style as
.logo {
background-image:url('Images/computing.jpg');}
I agree with everyone above about the slash, and that you need a width and height for the BG image but i see something else that might be causing the issue. Assuming that you are doing this on a web server and not locally. If this is a Linux environment then everything needs to be case sensitive. I have found that it is bad practice to use Images/ i would change to images/
Write some text inside your logo div just to ensure that is not problem with the with and height of the div.
Related
I am unable to move the caption text to the center of the background image and text in the new div is not only moving but formatted.
The text on the image is not at all moving and not only the it's not formatting according the code given in the css. The text in the next div is also not moving and getting formatted.
html
<div class="container1">
<div class="banner">
<div class="banner-text">
<h1> Our shop can be found at </br>
Park Avenue,Street No.1, SF, California </h1>
</div>
</div>
<div class="container2">
<div class="menu">
<h1> Menu </h1>
<p> Donec dapibus rhoncus blandit. Nam eu scelerisque augue. Suspendisse hendrerit rutrum maximus. Fusce elementum rhoncus felis sed elementum. Aenean ultricies, nulla vel scelerisque commodo,
felis eros hendrerit lectus, a porttitor metus massa in nibh. Vivamus egestas placerat quam nec laoreet. Nulla id semper turpis. Integer et imperdiet lacus. Nam ac condimentum neque. Suspendisse luctus porttitor purus,
ac fermentum quam scelerisque eu. Proin eget pulvinar lectus. Duis maximus massa vitae tellus efficitur, et pharetra ex aliquam. Quisque fringilla diam sodales pellentesque condimentum </p>
</div>
css code
.container1 {
width:100%;
margin:0 auto;
margin-top:500px;
}
.banner {
position:relative;
background-image:url('c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/social/california.jpg');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
padding-top:25%;
width:100%;
z-index:-1;
}
.banner-text h1[
position:absolute;
font-family:Javanese Text, Arial, sans-serif;
font-weight:bold;
font-size:100%;
color:#fff;
margin-left:150px;
text-align:center;
transform:translate(-50% -50%);
}
.container2 {
width:100%;
}
.menu,
.images {
width:auto;
float:none;
}
.menu {
width:50%;
float:left;
}
.menu h1 {
font-family:Javanese Text, Arial, sans-serif;
font-weight:bold;
font-size:100%;
margin-left:200px;
}
sai sankar you have to careful when you're writing css. Because if a single character is missed, the code will not work.
In .banner-text h1[ this line
change [ to {
I think it would be better if you attached the link to the demo(e.x. https://jsfiddle.net).
As I can see at the first glance, you have a typo:
.banner-text h1 [ // should be {
position:absolute;
font-family:Javanese Text, Arial, sans-serif;
font-weight:bold;
font-size:100%;
color:red;
margin-left:150px;
text-align:center;
transform:translate(-50% -50%);
}
when I resize my window for larger screens, the sidebar div seems to move along with the window, creating a space between the mainContent div and the sidebar Div.
Goal: I would like for both divs to stay in the middle of the website, next to each other, regardless of window size (think Facebook).
Can someone help me? Thank you.
* {
background-color: black;
}
.wrapper {
display:flex;
z-index: 0;
}
.topDiv{
background-color: rgb(255,255,255);
width:100%;
height: 100px;
position:fixed;
top:0;
left:0;
z-index: 1;
}
.Nav{
background-color: rgb(60,60,60);
width:100%;
height:50px;
position:fixed;
top:100px;
left:0;
z-index: 2;
}
.content{
background-color: rgb(255,255,255);
width:100%;
height:100%;
position:fixed;
top:150px;
left:0;
z-index:3;
}
.mainContent{
background-color: rgb(125,125,125);
position:fixed;
width:65%;
max-width: 720px;
height:100%;
left:10%;
z-index: 4;
}
.sidebar{
background-color: rgb(160,160,160);
position:fixed;
width:15%;
max-width: 240px;
height:100%;
right:10%;
z-index: 5;
}
.footer{
background-color: rgb(51, 56, 60);
position: fixed;
width: 100%;
height:75px;
bottom:0;
left:0;
z-index: 6;
}
<!DOCTYPE html>
<html>
<!-- DRAFT HOUSE INC. -->
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="topDiv">
</div>
<div class="Nav">
</div>
<div class="content">
<div class="mainContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque malesuada turpis ex, ut egestas nisi tincidunt non. Nulla auctor ullamcorper lectus, nec aliquet nulla pulvinar et. Etiam sit amet tortor metus. Morbi ut molestie quam, non vestibulum lorem. Sed lectus diam, malesuada sit amet maximus non, fermentum a justo. Proin leo neque, egestas at enim at, consequat ultricies lorem. Curabitur in nisi velit. Quisque quam tortor, blandit sed tellus ut, sollicitudin suscipit risus. Ut sit amet pretium est. Cras lobortis diam vitae varius auctor. Ut interdum felis et quam lacinia gravida.
Nulla varius fermentum leo ut porttitor. Aenean viverra commodo ante ut rutrum. Morbi sed pellentesque felis. Curabitur fringilla justo massa, porta accumsan sem mollis et. Aenean eu massa id justo semper facilisis in ac ligula. Aenean laoreet, arcu eget condimentum consequat, turpis eros dignissim erat, in vehicula dui arcu ac elit. Donec sit amet massa accumsan, viverra tellus quis, tincidunt nibh. Donec in justo at sem rhoncus blandit id sit amet ipsum.
</div>
<div class="sidebar">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
what you could do is remove the max-width and set the width of mainContent 66% check it here.
https://jsfiddle.net/estvwpvz/
.mainContent{
background-color: rgb(125,125,125);
position:fixed;
width:66%;
height:100%;
left:10%;
z-index: 4;
}
remove max-width from both mainContent and sidebar
I expect my question has already been answered numerous times but I couldn't find it.
I'm trying to create 2 divs which are next to each other within a container. However as soon as I add content, they overflow. I've included a JSFiddle but for some reason my 2 divs are already appearing outside of the container - it doesn't on my local version. I'd like the div which the content is in to expand as well as the container. Hope I've explained it ok.
JSFiddle
* {
margin:0px;
padding:0px;
}
body {
background-color:#C0D498;
}
#page-wrap {
background-color:#FFF;
width:940px;
margin:0 auto;
margin-top: 40px;
border-radius: 5px;
padding: 20px;
}
.logo {
width:175px;
height:auto;
}
.banner {
width:755px;
height:175px;
float:right;
border-radius: 5px;
background-image:url('images/banner.png');
}
.contentWrap {
padding-bottom: 20px;
}
.contentMain {
width:70%;
background-color:blue;
float:left;
}
.contentSub {
width:30%;
background-color:red;
float:left;
}
replace your html with this:
<div id="page-wrap">
<div class="banner"></div>
<div class="contentWrap">
<div class="contentMain">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac semper mauris. Maecenas orci dui, auctor ac auctor eu, pretium et mi. Donec interdum diam in est euismod gravida. Curabitur ligula tortor, bibendum nec odio maximus, efficitur lobortis mauris. Vestibulum in est rutrum, imperdiet turpis quis, elementum massa. Sed quis odio ut urna porttitor lobortis. Vivamus feugiat accumsan porttitor. Quisque sed ligula ac neque faucibus tristique. Suspendisse molestie eleifend purus vitae maximus. Proin posuere ante ut velit condimentum aliquam. Nullam pellentesque, mi rhoncus sagittis efficitur, libero ante scelerisque turpis, quis cursus dui libero eget dui. Suspendisse fringilla ut massa at aliquam. Praesent ut tempus erat, nec euismod ligula. Aliquam dui ex, viverra id commodo a, cursus sed sem. Praesent vel egestas nisl.</div>
<div class="contentSub">g</div>
</div>
<div style="clear:both; float:none;"></div>
</div>
The important part is this: <div style="clear:both; float:none;"></div>
and of course you can do it like this (recommended)
<div class="clear"></div>
and CSS
.clear{clear:both; float:none;}
.contentWrap { overflow: hidden; }
only this!
don't know if you want to float your banner
http://jsfiddle.net/flocko/fhrpghjb/
.contentWrap {
padding-bottom: 20px;
clear: both;
overflow: hidden;
}
as a rule of thumb: every element you float - you should clear in the parent element.
a clearfix class could help you on your way: http://nicolasgallagher.com/micro-clearfix-hack/
Okay, my problem is that #main_content is the child of #content but it will not display in #content. I need for #content to vertically expand to #main_content's size. Also, #content is a part of #main_wrap, which should extend all the way to #footer. Any help would be greatly appreciated.
#main_wrap {
width: 850px;
margin-top:15px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#top {
width: 850px;
height: 288px;
}
#top_content {
width:850px;
height:250px;
}
#nav {
background-color:#333;
height:38px;
#content {
width:850px;
padding-top:15px;
padding-bottom:15px;
}
#main_content {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
float:left;
width:850px;
height:auto;
}
#footer {
float: left;
width:100%;
height:250px;
background-image:url(images/footer_bg_blue.png);
background-repeat:repeat-x;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
text-align:center;
}
#footer_cont {
padding-top:15px;
padding-bottom:15px;
}
<div id="main_wrap">
<div id="top">
<div id="top_content">
</div>
<div id="nav">
</div>
</div>
<div id="content">
<!--<div id="sidebar">
</div>-->
<div id="main_content">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero risus, tincidunt a placerat vel, dignissim eget ligula. Mauris lobortis adipiscing orci, ut scelerisque nibh rhoncus nec. In metus ante, bibendum ac hendrerit et, vulputate id dolor. Sed et tellus at ipsum molestie tempus. Ut vitae vulputate sem. Sed sed ipsum elit, eget adipiscing magna. Sed et nisl eros, vitae convallis dui. Nullam nec feugiat nisi. Praesent in tortor ut enim molestie fermentum a et enim. Proin at porttitor ligula. Nulla vitae vulputate mauris. Donec auctor odio elit, vel egestas justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec suscipit pretium mollis. Sed egestas hendrerit quam eu pellentesque. Phasellus pharetra urna in mauris bibendum interdum. Pellentesque pellentesque pellentesque eros, eu adipiscing lectus fermentum id. Nullam iaculis, nisi auctor tincidunt hendrerit, eros quam accumsan elit, at cursus quam quam ac leo</p>
</div>
</div>
<!--</div>-->
<div id="footer">
<div id="footer_cont">
test
</div>
</div>
You can specify overflow: hidden; for your #content div to expand its height all the way to the footer, as you can see at this jsFiddle, http://jsfiddle.net/68FFL/2/. I'm not really sure why that works. If you look at the WordPress.com Mystique theme demo, you'll see that they use that rule to expand their #main div, otherwise it has no height like yours did.
I'm not entirely sure, but I think one of the reasons why you're #content div had no height was because it had child elements that weren't in the document flow on the inside, because they were floated. If you put another element inside that isn't floated, then the height of the div will expand, as you can see here, http://jsfiddle.net/68FFL/3/
I have a css layout which is centered, with 100% height. Everything looks good except that I need borders on the left and right side, with background images, that also must extend to 100% height of the page.
I've tried lots of different options but can't seem to get this worked out.
Please take a look at my code and let me know what I can do. Keep in mind everything but the right and left columns is positioned as I need it.
The left and right columns are leftbdr and rightbdr.
Thanks for any assistance.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tmp Site Mockup</title>
<!-- <link rel="stylesheet" type="text/css" href="assets/css/core2.css" /> -->
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:#E7E7E7 url(assets/img/bg.gif) repeat-x top;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:#9C090C;
}
p {
line-height:1.5;
margin:0 0 1em;
}
#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:974px;
background:#F2F8FB;;
height:auto !important; /* all other browsers */
height:100%; /* IE6: treated as min-height*/
min-height:100%; /* all other browsers */
}
#leftbdr{
width:49px;
float:left;
position:relative;
background:url(assets/img/lftSideShadow.jpg) repeat-y right top;
}
#rightbdr{
width:11px;
float:right;
position:relative;
background:url(assets/img/rgtSideShadow.jpg) repeat-y top;
}
#header {
height:22px;
padding-top: 4px;
padding-right: 27px;
border: 1px solid #6B0100;
background-color:#CE0200;
color:#FFFFFF;
text-align: right;
}
#header p {
font-family: Tahoma, arial;
font-size:11px;
margin:0;
}
#subheader {
height:122px;
border-bottom:2px solid #B3B3B3;
background-color: white;
}
#welcome {
height:31px;
border-top:1px solid white;
border-bottom:1px solid white;
background-color: #C20F00;
}
#topnav {
height:62px;
background:#B1B1B1 url(assets/img/topNavBG.jpg) no-repeat left top;
}
#topnav p{
text-align:right;
padding-right:22px;
font-size:10px;
color:#333;
}
#content {
padding:1em 1em 5em; /* bottom padding for footer */
background:#F2F8FB;
}
#content p {
text-align:justify;
padding:0 1em;
}
#footer {
position:absolute;
height:72px;
width:100%;
bottom:0; /* stick to bottom */
background:#9C090C url(assets/img/footerBG.gif) repeat-x;
color:white;
}
#footer p.left {
float: left;
padding-left:15px;
padding-top:7px;
}
#footer p.right {
float: right;
padding-right:15px;
padding-top:7px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftbdr" > </div>
<div id="header">
Home | Website.com | My Site | Logout
</div>
<div id="subheader">
</div>
<div id="welcome">
</div>
<div id="topnav">
<p><input name="radiobutton" type="radio" value="radiobutton" />All <input name="radiobutton" type="radio" value="radiobutton" />Documents <input name="radiobutton" type="radio" value="radiobutton" />People <input name="radiobutton" type="radio" value="radiobutton" />Google</p>
</div>
<div id="content">
<h2>Lorem ipsum dolor</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque arcu eget massa laoreet sit amet eleifend sapien accumsan. Sed ut tellus augue. Phasellus non blandit sem. Aliquam consequat ipsum rhoncus augue vehicula suscipit. Nunc laoreet gravida magna nec sodales. Cras quis lorem erat. Suspendisse eu urna in lorem placerat venenatis. Curabitur sed turpis in nulla convallis blandit. Donec ut tortor libero. Donec ante eros, facilisis vitae dictum eu, ornare nec libero. Nulla turpis purus, eleifend ac porta adipiscing, adipiscing non odio.
</p>
<h2>Vestibulum eu purus</h2>
<p>
Vestibulum eu purus ut enim eleifend sodales vel a purus. Aenean at orci dolor. Sed suscipit lorem nec est venenatis rutrum. Maecenas tempor, mi ac molestie suscipit, augue diam ultricies nibh, sit amet faucibus nulla leo vel nunc. Integer magna est, egestas nec placerat vel, pulvinar sed erat. Sed blandit ligula ac sapien venenatis rutrum. Aenean nec velit ut neque pharetra lobortis. Sed vulputate, ante ut euismod semper, nisi ante viverra ipsum, ac malesuada tellus nibh in tellus. Proin non velit ligula, eget egestas sapien. Curabitur ut viverra leo. Suspendisse pellentesque mauris lectus. Aenean sed arcu eleifend tortor cursus dapibus id in turpis. Nullam neque purus, congue id consectetur ut, dignissim id dolor. Praesent vehicula arcu vitae tellus lobortis mollis. Sed nec dapibus orci.
</p>
<h2>Maecenas faucibus sapien</h2>
<p>
Vestibulum at nibh nec elit pulvinar feugiat vel et erat. Maecenas faucibus sapien at enim dictum pharetra ac et augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor consequat auctor. Phasellus eu nibh nulla. Donec tempor scelerisque sodales. Fusce id neque quam. Cras sollicitudin dictum nisi, eu facilisis velit sodales quis. Aenean tempus congue erat in consequat. Curabitur odio ipsum, luctus sit amet accumsan quis, consequat nec elit. Nunc tristique nunc eget metus placerat vitae consequat erat tempus.
</p>
<p> </p>
</div>
<div id="footer">
<p class="left">
2010 Company Name, Inc. All Rights Reserved.<br />
<span style="color:#CCCCCC;">For internal use only by Company employees. Please do not disturibute.</span>
</p>
<p class="right">
Company Home | My Site | Log Out
</p>
</div>
<div id="rightbdr" > </div>
</div>
</body>
#container is the key. It takes up the full area of your page. You could apply a background/border style to it and/or <body> to achieve what you want.
For example a repeating image slice on <body> that is centered with repeat-y could give the effect of a graphical border without needing leftbdr and rightbdr.