I want a <div> that its background is an image . I define width and height but when I use background-image to import the image , nothing appears !
whats the problem ?
of course the path is correct because it works in <img>
#slide-show{
width: 1524px;
height:300px;
background-color: #808080;
background-image: url("assets\files\project-pics\assets\harvard-university.jpg");
}
this is the whole code (the last div is going to be backgrounded by image)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>put.ac.ir::پرتال سایت</title>
<link rel="stylesheet" href="C:\Users\user\Desktop\font-awesome-4.7.0\css\font-awesome.css">
<style>
/* .........................things I should add to page....................*/
/* 1: href to top-menu links*/
/* ---------------------------------------------------------------*/
#font-face {
font-family:'Btitr';
src:url('font/BTitrBold.eot') format('eot'),
url('font/BTitrBold.ttf') format('truetype');
font-weight:normal;
font-style:normal;
}
#font-face{
font-family:"sahel";
src:url('font/sahel.eot') format('eot'),
url('font/sahel.ttf') format('truetype');
}
#font-face{
font-family:'Bcompset';
src: url('font/BCompset.eot')format('eot'),
url('font/BCompset.ttf')format('truetype');
font-weight:normal;
font-style:normal;
}
body {
margin :0;
padding :0;
}
#header{
margin:0;
padding: 10px;
height :20px;
background-color: #4d4d4d;
list-style-type: none;
}
li{
color: white;
display: inline-block;
}
#circle {
text-align: center;
width: 45px;
height : 45px;
border-radius: 50px;
background-color: white;
box-shadow: 1px 1px 2px 4px rgba(166, 166, 166, 0.3);
position: fixed;
right: 10px;
bottom : 10px;
}
#header-logo {
background-color:#800000;
height : 250px;
}
#header-logo div img{
height : 100px;
width : 400px;
padding-left: 550px;
padding-top:60px;
}
#top-menu{
font-family :sahel;
list-style-type:none;
}
#top-menu li{
color:#cccccc;
padding-top: 30px;
padding-left:25px;
font-size : 13.5px;
}
#slide-show{
width: 1524px;
height:300px;
background-color: #808080;
background-image: url("assets\files\project-pics\assets\harvard-university.jpg");
}
/* ---------------------------------------------------------------------------*/
</style>
</head>
<body>
<a name="top"></a>
<ul id="header">
<li class="fa fa-search" style="color:white;"></li>
<li style="padding-left:10px; font-family:tahoma; font-size:15px;"> ...جستجو نکنید </li>
<li style="font-family:tahoma; padding-left:350px;">شنبه خر است</li>
<li style="padding-left:200px; font-family:tahoma; font-size:16;">اقتصاد مقاومتی ، اقدام و عمل</li>
<li style ="padding-left:400px; color:#cccccc;">[lori] [torki]</li>
</ul>
<div id="circle"><i class="fa fa-angle-up" style="font-size:40px;"></i></div>
<!logo and top of the main page >
<div id="header-logo">
<div>
<img src="project-pics/assets/header-logo.png"/>
</div>
<div>
<ul id="top-menu" title="comming soon">
<a><li style="padding-left:295px;"> دانشگاه TER سامانه</li></a>
<a><li>داعش کده ها</li></a>
<a><li>معاونت حمل و نقل با گاری</li></a>
<a><li>معاونت دانشجوهای کلنگی</li></a>
<a><li>معاونت آمرزشی</li></a>
<a><li>موزه فراست</li></a>
</ul>
</div>
<! slide show of the page>
</div>
<div id="slide-show">
</div>
</body>
</html>
OK !
Its the path in the image
enter image description here
You can't have a space in your url.
background-image: url("project assets\files\project-pics\assets\harvard-university.jpg");
Use %20 or rename that folder with - or _.
#slide-show{
width: 1524px;
height:300px;
background-color: #808080;
background-image: url("projectassets\files\project-pics\assets\harvard-university.jpg");
}
use the code above. rename your folder project assets to projectassets.
You cannot have a space in your url path.
Also you don't have semicolon at the end of your height deceleration.
You have not defined a unit for your width declaration,use a valid unit like px,%,em to define your width.
Related
I'm trying to add some top padding only to the font awesome icon, but if I set padding-top:10px or margin-top:10px to the i element, it also adds padding to the text before it.
Can someone help?
jsFiddle
i {
font-size: 30px;
padding-top: 10px;
}
.block {
background-color: #ccc;
padding: 10px;
max-width: 400px;
text-align: center;
}
.block-number {
background-color: #000;
color: #fff;
padding: 10px;
display: inline-block;
font-size: 20px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="block">
<div class="block-number">2 to 4</div>
<i class="fa fa-large fa-camera-retro"></i>
</div>
Since both of .block-number and font awesome <i> elements are set to inline block, so vertical-align will take effects, you can change the default value from baseline to top etc.
.block-number, i {
...
vertical-align: top;
}
i {
...
padding-top: 10px;
}
There is another way by using position and top to adjust <i> element individually.
i {
position: relative;
top: 10px;
}
I'm not sure if it's possible to do it with other method, but what I would do in your case is positioning the icon absolutely.
i {
font-size:30px;
position: absolute;
padding-top: 8px;
padding-left: 10px;
}
.block {
background-color:#f1f1f1;
padding:10px;
max-width:400px;
text-align:center;
position: relative;
}
.block-number {
background-color:#000;
color:#fff;
padding:10px;
display:inline-block;
font-size:20px;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="block">
<div class="block-number">
2 to 4
</div>
<i class="fa fa-large fa-camera-retro"></i>
</div>
I didn't get your answer yet, but if you just want to center the text and icon vertically, use following code:
i {
font-size:30px;
}
.block {
background-color:#f1f1f1;
padding:10px;
max-width:400px;
text-align:center;
}
.block-number {
background-color:#000;
color:#fff;
padding:10px;
display:inline-block;
font-size:20px;
}
.block > * {
vertical-align: middle;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="block">
<div class="block-number">
2 to 4
</div>
<i class="fa fa-large fa-camera-retro"></i>
</div>
How to get the menu bar right below the Dial food caption and remove the underline shown in the below code:
<body>
<div id="header">
<h1 style="color: #CC6600; height: 100px; width: auto;">
Dial food</h1>
</div>
<div id="Menu" style="background-color: #330000; font-size: 20px; height: 25px; width:auto;
word-spacing: 24px; position:absolute">
About
Restaurants
Contact
Support
</div>
</body>
can you please help me in getting this alignment and link text only get aligned?
Change the <h1> height to 15px to bring the menu bar up. (or a value to your liking)
<h1 style="color: #CC6600; height: 15px; width: auto;">
And use the following CSS to remove the underline.
#Menu a {
text-decoration:none;
}
http://jsfiddle.net/6bxVr/
HTML
Dial food
<ul>
<li> About </li>
<li>Restaurants </li>
<li>Contact </li>
<li>Support </li>
</ul>
CSS
.header
{
color: #CC6600;
height:20px;
width: auto;
margin:10px;
}
ul
{
list-style:none;
}
ul li
{
float:left;
padding:10px;
background-color: #330000;
word-spacing: 24px;
font-size: 20px;
height: 25px;
width:auto;
}
li a
{
text-decoration:none;
}
Fiddle Demo Here
Update fiddle of Yours
Hope this helps
happy coding..!!
I have a small gap between everything in my webpage and the browser's edge. I must have added some code that has done this, but am unsure what did. What do I do to remove this? Also in my navigation bar, the last link on the right hand side, has a small gap that is not highlighted on hover on the very edge on the right side of it.
I also need help with the gap between the navigation bar + header and the side banners. How do I remove that gap?
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="headers_t">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240" />
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
</span>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers_t{
/* Add something here */
}
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h, img{
display: block;
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
Disregard the .headers_t id in the css, which I am editing right now...unless that's the cause.
The JSFiddle link is here.
You need to add margin:0px and padding:0px to your body CSS
so:
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
margin:0px;
padding:0px;
}
Just a forewarning, I am new to HTML and CSS. Please be patient with my inquiry here.
I am attempting to center the navigation bar while overlapping it on the bottom side of the banner. I have a banner image at the top and a background image for the main content which is positioned just below the nav bar. I've attempted to add the following:
ul.navbar li {
float: left}
This floated the nav bar directly underneath the main body background instead of above everything. In order to get the list in a horizontal format i used
ul.navbar li {
display: inline-table}
This was the only variation that would give me the correct horizontal format I was looking for. Now I just need it centered and overlaid on the bottom end of my banner image. Any suggestions? My HTML and CSS is as follows:
CSS:
body {
padding-left: 9em;
font-family: Georgia, "Times New Roman", Times, serif;
color: #6699FF;
background-color: white
}
div#contentareamain1 {
background: url(contentareamain1.png) no-repeat;
background-color: white;
color: white;
height: 634px;
position: relative;
}
div#contentareamain1text {
position: relative;
height: auto;
width: 700px;
left: 5em;
top: 4em;
}
#header {
float:left;
width:100%;
height:87px;
}
.wrap {
position:relative;
margin:0 ;
}
ul.navbar {
list-style-type: none;
padding: 0.3em;
margin: 0;
top: 2em;
left: 5em;
width: 15em;
}
h1 {
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
ul.navbar li {
background: rgb(157,193,255);
margin: 0.5em ;
padding: 0.3em;
border-bottom: 1em solid black;
text-align: center;
display: inline-table;
}
ul.navbar a:hover {
color: blue;
background-color: #00FFFF;
}
ul.navbar a {
text-decoration: none;
}
HTML:
<body>
<div id="header">
<div class="wrap">
<img src="banner.png"/>
</div><ul class="navbar">
<p> <li>Home </p>
<p> <li>Services </p>
<p> <li>Training </p>
</ul>
<div id="contentareamain1" no-repeat>
<div id="contentareamain1text"><p>
</p></div>
</div>
Thank you so much in advance!
First you should check your HTML structure – it seems there is a missing closing DIV tag and you should delete the wrapping P elements around the list elements.
Try this:
<div id="header">
<div class="wrap">
<img src="banner.png"/>
</div>
<ul class="navbar">
<li>Home</li>
<li>Services</li>
<li>Training</li>
</ul>
</div>
After you just need to give your header image this CSS:
display:block; margin:0 auto; position:relative;
and the ul.navbar needs something like this:
margin:0 auto; float:none; position:relative; top:-35px; width:500px;
and you should delete the relative position of your div#contentareamain1 to get this code work.
div#contentareamain1 { (…) /*position: relative;*/ }
You should really visit W3C and learn your HTML :)
The HTML
<div id="header">
<img src="" />
<ul class="navbar">
<li>Link text</li>
<li>Link text</li>
<li>Link text</li>
</ul>
</div>
<div id="content-area>
</div>
Your HTML contains some <p>-tags who don't belong there. Also I guess you would like your content outside of the header?
The CSS
(I only give you an example how to place your navbar centered in your header, the rest is up to you)
#header {
position:relative;
z-index:1;
text-align:center;
}
#header img {
position:inherit;
z-index:inherit;
}
#header ul.navbar {
position:relative;
z-index:2;
margin:0 auto;
top:-35px;
list-style-type:none;
}
#header ul.navbar li {
display:inline-block;
}
#header ul.navbar li a {
display:block;
padding:4px 8px;
background-color:blue;
color:white;
text-decoration:none;
}
You can see the code in action at jsFiddle and play around with it.
Hope it helped you a bit.
I created a layout were everything is centered (with the "margin="0 auto" technique). I also wanted the header and footer to be black and expand to both sides when the browser enlarge to the sides. If I center everything the black background will center too and it wont expand indefinably. The only solution I found was to apply the background style to the header and footer and using a class inside them (.container) to center the content (I think Stack Overflow uses this technique with the footer). It's nice but I would like to know if there's a better way rather than adding additional divs?
MY HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>globo design</title>
<link href="styles/layout.css" rel="stylesheet" type="text/css" />
<link href="styles/slideshow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/slideshow.js"></script>
</head>
<body id="home">
<!-- header -->
<div id="header">
<div class="container">
<h1>wider design</h1>
<!-- navigation -->
<ul id="navigation">
<li class="home"><span>home</span></li>
<li class="portfolio"><span>portfolio</span></li>
<li class="about"><span>about</span></li>
<li class="contact"><span>contact</span></li>
</ul>
</div>
</div>
<!-- content -->
<div id="content">
<div id="top-column">
<p>We <strong>design and develop</strong> clean and effective webs in the <strong>top 3 languages</strong>
on the Internet. Internet is mean to reach the whole world.You are mean to reach the whole audience:</p>
</div>
<div id="middle-column">
<h2>Our Work</h2>
<!-- slideshow -->
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
Content for slide 1 goes here
</div>
<div class="slide">
Content for slide 2 goes here
</div>
<div class="slide">
Content for slide 3 goes here
</div>
<div class="slide">
Content for slide 4 goes here
</div>
</div>
</div>
</div>
<div id="left-column">
<h2>Web Design</h2>
<p>Create a web site easily with this online HTML generator. Follow the steps below to create web pages then click "view html page" to test it once it's completed. You can copy and paste generated code where you wish within the generated document(s). For example: You created an HTML table with 3 rows and 3 columns. You then added a link, which appears below the HTML table. If you want the link inside the HTML table, just cut and paste it inside the table in place of an "ADD TEXT" statement. Any where text,images,or links need to be, there will be a generated "ADD TEXT" statement in the HTML pages.</p>
</div>
<div id="right-column">
<h2>Web Translation</h2>
<p>Create a web site easily with this online HTML generator. Follow the steps below to create web pages then click "view html page" to test it once it's completed. You can copy and paste generated code where you wish within the generated document(s). For example: You created an HTML table with 3 rows and 3 columns. You then added a link, which appears below the HTML table. If you want the link inside the HTML table, just cut and paste it inside the table in place of an "ADD TEXT" statement. Any where text,images,or links need to be, there will be a generated "ADD TEXT" statement in the HTML pages.</p>
</div>
</div>
</div>
<!-- footer -->
<div id="footer">
<div class="container">
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11932489-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
MY CSS:
/* reset */
* {
margin: 0;
padding: 0;
}
/* tags */
body {
background-color: #FFFFFF;
color: #5D5D5D;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 75%;
}
h1 {
background: #2D2D2D url(../images/logo.png) no-repeat scroll 0 0;
margin-bottom: 20px;
text-indent: -9999px;
}
h2 {
color: #418EE4;
font-family: Arial;
font-size: 16px;
font-weight: normal;
margin-bottom: 10px;
}
a {
font-family: Arial, "MS Trebuchet", sans-serif;
}
/* classes */
.container {
margin: 0 auto;
width: 960px;
}
/* header */
#header {
background-color: #2D2D2D;
padding-top: 10px;
}
/* navigation */
ul#navigation {
height: 20px;
list-style: none;
margin: 0;
padding: 0;
}
ul#navigation li {
float: left;
}
ul#navigation li a {
background: url(../images/tab.png);
color: #C0C0C0;
display: block;
height: 20px;
outline: none;
padding-left: 10px;
text-decoration: none;
}
ul#navigation li a:hover {
color: #418EE4;
}
#home li.home a, #portfolio li.portfolio a, #about li.about a, #contact li.contact a {
background-position: 0 -32px;
color: #757575;
}
ul#navigation span {
background: url(../images/tab.png) 100% 0;
display: block;
line-height: 20px;
padding-right: 20px;
}
#home li.home span, #portfolio li.portfolio span, #about li.about span, #contact li.contact span {
background-position: 100% -32px;
}
/* content */
#content {
background-color: #FFFFFF;
padding: 20px;
overflow: hidden;
margin: 0 auto;
width: 960px;
}
#content h2 {
border-top: 2px dashed #F0F0F0;
border-bottom: 2px dashed #F0F0F0;
padding: 5px 0 5px 0;
margin: 15px 0 15px 0;
}
#top-column {
color: #818181;
font-size: 16px;
font-family: Arial, "MS Trebuchet", sans-serif;
margin: 10px 0 10px 0;
padding: 10px 0 20px 0;
}
#top-column strong {
font-weight: normal;
color: #3C3C3C;
}
#middle-column {
float: left;
}
#right-column {
float: left;
width: 420px;
}
#left-column {
float: right;
width: 500px;
}
/* footer */
#footer {
clear: both;
background-color: #2D2D2D;
height: 200px;
}
I haven't tested your code, but from the description it sounds like what I would typically do to code a stacked layout like this. My HTML structure would be something like this (obviously I've left out head, links to stylesheets, etc. for the sake of a simple example):
<html>
<body>
<div id="header-wrap">
<div id="header"> ... </div>
</div>
<div id="main-wrap">
<div id="main"> ... </div>
</div>
<div id="footer-wrap">
<div id="footer"> ... </div>
</div>
</body>
</html>
I think you can see how the CSS would be written for this -- each of the wrappers (#header-wrap, #main-wrap, #footer-wrap) would have the background applied and 100% width, then the inner containers (#header, #main, #footer) would have a fixed width with no background applied. If you are using, for example, 2 floated columns inside the main, you'll have to use something similar to a div that clears underneath for the background to fill the height of the content. It's not the best solution, but it's common and works well.
<div id="main">
<div style="float: left; width: 30%;"> ... </div>
<div style="float: right; width: 60%;"> ... </div>
<div style="clear: both; height: 0;"> </div>
</div>