I am a complete noob when it comes to web design. I just started learning some basics. At the moment I am trying to make an image become the head banner of my web page. I've visited many tutorials and each say to use the code <img src="images/wood.jpg" height="168" width="100"> if you have a file in the directory of the webpage specifically for images and to use height and width specifiers to make it fit within the confines of the banner. With that being said i refresh the page and no image is displayed. Also bonus point for information on how to make the words overlay ontop of the image.
<!DOCTYPE HTML>
<!--- COMMENT--->
<html long="en">
<head>
<meta charset="UTF -8"/>
<Title>Ken's Woodworking Emporium</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if lt IE 9]>
<script>
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
document.createElement("header");
document.createElement("main");
document.createElement("nav");
document.createElement("section");
</script>
<![endif]-->
<meta name="description" contents= "Learn everything you want to know
about wood working."/>
<meta name="keyword" content=html5 canvas,html5,toutorial,html5 doctype,
video, learn/>
<meta name="robots" Content="index, follow"/>
<base href="http://localhost/html/"/>
<link rel= stylesheet" href="styles.css"/>
</head>
<body>
<header class="banner">
<h1>Woodworking</h1>
<img src="images/wood.jpg">
<p> Local woodworkers</p>
</header>
<nav>
<ul>
<li>Home</li>
<li>Archive</li>
<li>About</li>
</ul>
</nav>
<main>
<section>
<h2>Carpenty</h2>
<article>
<header>
<h3>Details on carpentry</h3>
<p>(Author, date)</p>
</header>
<p>THis is the story text.This is the story text.</p>
<p>This is the story text.This is the story text.</p>
</article>
</section>
<section>
<article>
<header>
<h3>Custom carpentry.</h3>
<p>(Author, date)</p>
</header>
<p>THis is the story text.This is the story text.</p>
<p>This is the story text.This is the story text.</p>
</article>
</section>
<section>
<h2>Restoration</h2>
<article>
<header>
<h3>Old to new</h3>
<p>(Author, date)</p>
</header>
<p>THis is the story text.This is the story text.</p>
<p>This is the story text.This is the story text.</p>
</article>
</section>
<section>
<article>
<header>
<h3>refinishing.</h3>
<p>(Author, date)</p>
</header>
<p>THis is the story text.This is the story text.</p>
<p>This is the story text.This is the story text.</p>
</article>
</section>
</main>
<aside>
<h2>Have a request?</h2>
<p>If you have a custom order request feel free to contact us at 918-555-5555, or ABC123#yahoo.com</p>
</aside>
<footer>
<p>Footer information</p>
</footer>
</body>
</html>
Rather than using an img tag, if you want the banner image as a background for some other element, you might try the background-image CSS property. Knowing nothing about your stylesheet, I made it as straightforward as possible.
I made you a small example # https://jsfiddle.net/wck2hyxt/1/
HTML:
<body>
<header class="banner">
<h1>Woodworking</h1>
<p> Local woodworkers</p>
</header>
</body>
CSS:
header.banner {
background-image:url("https://upload.wikimedia.org/wikipedia/commons/b/b3/Campania_banner_View_from_Capri.jpg");
background-size: cover;
height: 168px;
width: 100%;
padding: 10px;
}
Notice: I used an external image for the banner. You could change that url to be "/path/to/image". Also, I believe your intention was to make the width 100%, not just 100.
On your webserver the public_html should look like this:
index.html
images
The images folder above should have the file 'wood.jpg' within it.
On your local PC, right click the wood.jpg file and go to properties.
The path is case sensitive.
If the extension ends in .jpg then your code should look like this:
<img src="images/wood.jpg" height="168" width="100">
If the extension ends in .JPG then your code should look like this:
<img src="images/wood.JPG" height="168" width="100">
When refreshing, hold ctrl + F5 to clear your cache and see your changes you have made.
If you need to make words overlay the image, you will need to add position elements within your CSS. W3 provides a great tutorial here: https://www.w3schools.com/css/tryit.asp?filename=trycss_zindex
for buttons or something with overlay you can use background image in the css as mentioned.
overwise you'll need a wrapper with attribute position: relative that contains the image and another div with the following as the overlay layer:
position: absolute;
z-index: 2; // you can use higher number if needed
and apply absolute location relatively to the container with the attributes top, right, bottom and / or left, should look like this for the top right corner with 10px padding i.e:
in html:
<div class="img-wrap">
<img src="wood.jpg" alt="wood">
<div class="img-overlay">overlay text</div>
</div>
in css:
.img-wrap {
position:relative;
}
.img-wrap .img-overlay {
position: absolute;
z-index:2;
top: 10px;
right: 10px;
}
if its only inner pages that dont show up images it might because the image path is relative to last folder, better use absolute paths when or relative to the root of the website folder. like this;
<img src="/images/wood.jpg" alt="wood image">
or
<img src="http://www.yourwebsite.com/images/wood.jpg" alt="wood image">
or if your using wordpress it might look somthing like one of these
<img src="http://www.yourwebsite.com/wp-content/uploads/**/****/images/wood.jpg" alt="wood image">
<img src="http://www.yourwebsite.com/wp-content/images/wood.jpg" alt="wood image">
<img src="http://www.yourwebsite.com/wp-content/themes/your-theme/images/wood.jpg" alt="wood image">
etc.
P.S for better semantics always use alt attribute with images.
Related
I have always found replies to my questions here even before I asked them. Right now I am facing a problem regarding the responsive adaption of a site I created (www.cichlidae.com) that led me to post this question after several years of just reading.
In my site, when a break-point is reached, a left side menu bar seen in all pages hides. I would like this bar to be displayed over the content on demand, when a mobile device is used. I was able to make the top menu bar adapt responsively to display and the #bar to hide.
For trying to display the left bar menu (with a div labelled “bar”) I used the following CSS code:
#bar {
display:none;
}
#bar ~ .display_bar:focus {
display:block;
}
I set #bar first as that is the order in which the code for #bar loads once the page is loaded (I tried .display_bar:focus ~#bar as well). I created an icon displayed in mobile view to activate the display switch:
<div class=\"display_bar\">Some graphic</div>
I have tried all combinations and browsers, validated CSS and HTML, but the bar just won’t show when the icon is clicked on. I have tried with a single <p> tag with a class name instead of #bar but it ignores it as well. One of the example of pages could be seen in the URL:
http://www.cichlidae.com/index_catalog.php
What could I be doing wrong? I need the left bar to show on demand when in mobile view, preferably just with CSS. Thanks so much for any help you could provide me.
The relevant HTML code follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>All cichlid species - Cichlid ..</title>
<link rel="stylesheet" type="text/css" href="design/styles/indexstyle.css" title="Cichlid ...">
...
</head>
<body>
<!-- left frame -->
<div id="bar">
<img src="design/graphics/logos/logo_menu.jpg" width="200" height="165" alt="Cichlid Room Companion"><br><br>
...
<div style="padding-left:10px;">
<h3>Catalog</h3>
Classification<br>
....
</div>
</div>
<!-- right frame -->
<div id="main">
<div id="canvas" style="max-width:800px">
<!-- Menu bar -->
<ul id="menu" class="r-hide">
<li>Home
<div class="dropdown_3columns">
<h2>Welcome ...</h2>
</div>
</li>
</ul>
<div class="r-only">
<div id="r-navigation-menu">
<input type="checkbox" id="r-navigation-button">
<ul class="r-menu-items">
<h2>News</h2>
<li>What's new</li>
....
</ul>
<label for="r-navigation-button" id="r-navigation-label">
<div class="r-drop-icon">
<img src="design/graphics/icons/menu-hamburger.png" class="icon" width="32" height="32" alt="">
...
</div>
</label>
</div>
<div class="display_bar" tabindex="-1"><img src="design/graphics/icons/menu-collapse.png" class="icon" width="32" height="32" alt=""></div>
</div>
I am trying to get my footer, which has a grey color to show this color all the way to the bottom in my responsive design. It goes all the way across the page when in PC view mode, when I take it to the mobile size, the box only shows for half of the footer and then cuts off. I am not sure why it's not working for me.
Thanks ahead of time for taking a look.
HTML:
div id="footer">
<div class="container">
<div class="row">
<h3 class="footertext">About Us:</h3>
<br>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
<br>
<h4 class="footertext">Sitemap info 1</h4>
<p class="footertext">here is some site map info<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Sitemap info 2</h4>
<p class="footertext">here is some more site map info<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">sitemap info 3</h4>
<p class="footertext">This is some more of it.<br>
</center>
</div>
</div>
<div class="row">
<p><center>Contact Stuff Here <p class="footertext">Copyright 2014</p></center></p>
</div>
</div>
</div>
CSS:
#footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 280px;
background-color:#B6B6B4;
/*
You are using col-md-4 classes for your grid, causing each column take a full row in mobile view and your footer is not going all the way to the bottom of page because of its fixed height (280px).
Try using col-xs-4 for x-small devices and appropriate classes for other windows sizes.
This can be achieved by doing something like <div class="col-md-4 col-xs-6">Content</div> which means this columns will use 4 grids in desktop view and 6 grids in mobile viewport.
More documentation can be found here, under 'Grid options' section.
By the way, <center> tag is obsolete, I would recommend you to use Bootstrap's text-center CSS class.
First of all I would recommend posting your code in jsfiddle for easier debugging: http://jsfiddle.net/r7mTc/
In jsfiddle above you will see that content of the footer is way higher than the footer itself and stick out of it.
Now look here: http://jsfiddle.net/r7mTc/1/ I just deleted height line in CSS ;)
I also see few other problems in your code:
<p><center>Contact Stuff Here <p
class="footertext">Copyright 2014</p></center></p>
Tag p can contain only inline elements like span or img, so there shouldn't be nested p tags.
<p class="footertext">here is some more site map info<br>
Tag p should always has be closed, so you should add </p> after <br>
<center> tag is deprecated. Better practise is to use CSS for that - for example text-align:center for inline elements or margin:auto for blocks.
I am trying to figure out a way to have multiple background colors on a project i am working on. The design is made with 4 colors on the background. 1 for the header and content, 1 for the sidebar and 1 for each of the 2 footer sections.
Setting the background-color on those is easy as pie - the problem comes when i need to make the colors actually grow outside of the container (match the width of the browser) but still have a max-width of the container itself for 940px.
I am using Twitter Bootstrap 3 as the boilerplate for the project.
Any suggestions?
If background images are an option, then you could split your page into a top part and a bottom part, and then apply background images to those containers.
Your HTML would look like this:
<!DOCTYPE html>
<html>
<head>
…
</head>
<body>
<div class="main-wrapper">
<div class="container">
<header class="header" role="banner">
…
</header>
<div class="row">
<section class="col-8" role="main">
…
</section>
<aside class="col-4" role="complementary">
…
</aside>
</div>
</div>
</div>
<footer class="footer" role="contentinfo">
<div class="container">
…
</div>
</footer>
</body>
</html>
And then you would just create styles for your .main-wrapper and .footer that applies your tiling background image to them.
Create a new style sheet called application.css and load it after bootstrap.min.css, and place the following CSS rules in it:
.main-wrapper {
background: url(../img/main-bg.png) repeat-y 50% 0;
}
.footer {
background: url(../img/footer-bg.png) repeat-y 50% 0;
}
Ok, I want to display some text next to my pricetables. This text has a background that must be repeated across the entire page, thus outside the container. Atm, the text is behind it's background (thus not visible), and the background gets cutted at the edge of the container.
How can I edit this code so that I can see my text, and that the background overflows the edge of the container?
This is how it looks like right now:
preview http://piclair.com/data/1t2ri.jpg
My CSS:
.overflow {
margin:0 -400px;/* now equals 1600px wide */
min-height:213px;
background: url('/images/pakkettenbg.png') repeat-x;
position:relative;
z-index: 0;
overflow: visible;
}
#onside {position: relative; z-index: 1; margin-top: 124px; color: #8C8C8B;}
#logopakketten {position: relative; z-index: 1; margin-left: 158px; margin-top: -332px; min-width: 782px; overflow: visible;}
#orderbuttons {position: relative; z-index: 1; float: left; margin-left: 158px;}
And my HTML:
<div class="overflow">
<div id="onside">
<p>Unieke logo ontwerpen:</p>
<p>Levertijd:</p>
<p>Revisies:</p>
<p>Briefpapier ontwerpen:</p>
<p>Enveloppe ontwerpen:</p>
<p>Visitekaartje ontwerpen:</p>
<p>Bestandsformaten:</p>
</div>
</div>
<div id="logopakketten">
<img src="/images/logopakketten/Prijskolom%20S.png" alt="" />
<img src="/images/logopakketten/Prijskolom%20M.png" alt="" />
<img src="/images/logopakketten/Prijskolom%20L.png" alt="" />
<img src="/images/logopakketten/Prijskolom%20XXL.png" alt="" />
</div>
<div id="orderbuttons">
<img src="/images/logopakketten/ordernow.png" alt="" />
<img src="/images/logopakketten/ordernow.png" alt="" />
<img src="/images/logopakketten/ordernow.png" alt="" />
<img src="/images/logopakketten/ordernowlastcolumn.png" alt="" />
</div>
Why are you using positioning? That's a rhetorical question, you're not supposed to (use positioning). It's the jQuery of CSS, everyone uses it and it's the worst thing you can use.
If the child elements are floating than the parent needs to have overflow: auto; set. Also do not start relative URLs with a slash. You should get used to using the base element...
http://www.jabcreations.com/blog/streamlining-local-and-live-development-with-the-base-element
The main element with the repeating grey background-image should contain those vertical banners. You want text to the left of those banners? Then put text to the left of those banners.
You did not post enough to warrant a full working demo (reply with more info and I might be able to refine this for you) though this will get you moving and grooving in the right direction. Make sure you adjust the base element accordingly (it will be different for your local/live environments, use a scripting language like PHP to determine your domain (e.g. localhost or example.com) and then serve the correct value for the base element).
<?php
if (isset($_SERVER['HTTP_ACCEPT']))
{
if (stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
header('Content-Type: application/xhtml+xml');
}
else {header('Content-Type: text/html');}
}
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<base href="http://localhost/version-3.0/" />
<style type="text/css">
.overflow {overflow: auto;}
.left {float: left;}
.width_10 {width: 10%;}
.width_20 {width: 20%;}
.width_30 {width: 30%;}
</style>
</head>
<body>
<div class="overflow">
<div class="left">
<p>text here</p>
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20S.png" alt="" />
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20M.png" alt="" />
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20L.png" alt="" />
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20XXL.png" alt="" />
</div>
</div>
</body>
</html>
Save this as an .xhtml extension if you're not using scripting (e.g. PHP) (XHTML will not work in IE8 or lower but it's at 5% market share right now, at this stage of your understanding concentrate on competent browsers) and XHTML is great because it's strict the moment you encounter an error you'll know you need to fix it, unless you want to blow three days trying to figure out you're missing a quote on an attribute. Strict code means you'll get in to the groove of doing it right the first time once you're used to it and it'll save you immense amounts of time.
You could also probably stand to learn how to correctly utilize CSS level 1, not a joke, most people don't correctly use the float property and end up spamming tons of position properties all over the place turning a page in to suck.
http://www.jabcreations.com/web/css/nested-divisible-elements
Yeah, you'll eventually utilize position for certain main-level elements for sites with advanced layouts (hint: 99% of sites do NOT have advanced layouts) but without a good foundation everything laying on top of that will be even less sturdy to relay on.
The code below is from W3CSchool example:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:20%;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:80%;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
You can copy the code and paste it to the editor below:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs
I have already specified the width of "menu" to 20% and "content" to 80%, why at the right side of "content" has a blank area?
It will only align properly if I add "float:left" in the css style of "content". I can't understand why it behave like that. Anyone can explain?
Thanks for help.
This is because the width of the container for menu and content is set to 500px.
Set it to 100% if you want it to take the whole page:
<div id="container" style="width:100%">
Also if you want the content to simply take all the remaining space, don't assign it a width:
<div id="content" style="background-color:#EEEEEE; height:200px">Content goes here</div>
Here's the full working code:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:100%">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:20%;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
There is blank area at right of page because your floating div is overlapping your content div because floating divs always float above the other divs (Try removing background-color of menu to see example). When you apply float right/left to your content div, it also floats with menu div hence occupies all the space.
please refer to This site
for more information on float.
Thank you,
DIVs are block elements. This means that 2 DIVs are displayed one bellow another, if not use float , position:absolute;, or inline.
if you use 'float' style express this div present external for 'inline' and present inside for 'block',and will affect the back of the element. so if content right display you can use 'float:left;width:80%' and 'float:left;width:80%'. In fact, this is 'display:inline-block', but according to my experience, it will produce the browser bug.