I'm trying to get the title hot rods to line up with the navigation, and the photo to float right and line up with the text content below it as well as the title and navigation to the left of it. I also need to get the navigation bar to extend the length of the photo until the text content. (as shown in the picture)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ysette Ortiz – Assignment 01</title>
<link href="rod_styles.css" rel="stylesheet" type="text/css">
</head>
<div id="body">
<body>
</br>
<div id="container">
<div id="nav">
<nav>
<div id="h1">
<h1> HOT RODS! </h1>
</div>
<ol>
<li>Home</li>
<li>Rods</li>
<li>Lifestyle</li>
</ol>
<div id="image"><img src="Images/duece.jpg" width="500" height="323" alt=""/></div>
</nav>
</div>
<div id="Content"><p>Hot rods are typically American cars with large engines modified for linear speed. The origin of the term "hot rod" is unclear. One explanation is that the term is a contraction of "hot roadster," meaning a roadster that was modified for speed. Another explanation is that the mufflers were exposed and thus there was a "hot rod" or hot muffler neck when the vehicle was running. Open roadsters were the cars of choice to modify because they were light. Hot Rod may also refer to the connecting rods, cam, or pushrods inside the engine or to the exposed frame rails of such an automobile. To me, the American hot rod is a thing of beauty created by artisans who use steel, rubber, and glass as their canvas.
</p>
</div>
</div>
</br></br></br></br></br></br>
</body>
</html>
//css------>
#charset "UTF-8";
#body{ background-image:url(Images/road_and_mountain.jpg);
background-size:cover;
}
#container {
width: 804px;
margin: 0 auto;
}
#nav ul, li{
font:Verdana;
width: 200px;
font-size:1.3em;
border-style:solid;
border-width: 1px;
list-style: none;
background-color: rgba(255,255,255,1.00);
}
#h1{
background-color:rgba(0,0,0,1.00);
color:rgba(255,255,255,1.00);
width: 200px;
}
#Content{
width:804px;
font:times new roman;
background-color: rgba(255,255,255,1.00);
border-style:solid;
border-width:2px;
padding-top:10px;
padding-left:20px;
padding-right:20px;
}
#image container{
width:604px;
float:right;
border-style:solid;
border-width: 1px;
}
If you want to keep them aligned in same line then you should give all their blocks same display i.e. Display: inline-block. Inline block will align all your elements in single line.
You can also add different width to them if you wish to do that.
Try this.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ysette Ortiz ? Assignment 01</title>
<link href="rod_styles.css" rel="stylesheet" type="text/css">
</head>
<div id="body">
<body>
</br>
<div id="container">
<div id="nav">
<nav>
<div id="h1" style = "display:inline-block">
<h1> HOT RODS! </h1>
</div>
<ol style = "display:inline-block">
<li style = "display:inline-block">Home</li>
<li style = "display:inline-block">Rods</li>
<li style = "display:inline-block">Lifestyle</li>
</ol>
<div style = "display:inline-block" id="image"><img src="Images/duece.jpg" width="500" height="323" alt=""/></div>
</nav>
</div>
<div id="Content"><p>Hot rods are typically American cars with large engines modified for linear speed. The origin of the term "hot rod" is unclear. One explanation is that the term is a contraction of "hot roadster," meaning a roadster that was modified for speed. Another explanation is that the mufflers were exposed and thus there was a "hot rod" or hot muffler neck when the vehicle was running. Open roadsters were the cars of choice to modify because they were light. Hot Rod may also refer to the connecting rods, cam, or pushrods inside the engine or to the exposed frame rails of such an automobile. To me, the American hot rod is a thing of beauty created by artisans who use steel, rubber, and glass as their canvas.
</p>
</div>
</div>
</br></br></br></br></br></br>
</body>
</html>
Related
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.
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.
Hey guys i cant seem to get my background to not repeat or even get a border to show here is the code
HTML:
<div id="content">
<div class="product">
<p><strong>Wonderful Guest House</strong></p>
<p><img src="images/knysna.jpg" width="282" height="171" align="absmiddle" /></p>
<p>Guest Houses are great alternative accommodation to expensive hotels when travelling for business or for pleasure. Most guest houses offer the same services as big hotels like cooked meals, airport shuttles, satellite TV, internet connectivity and even conferencing facilities. </p>
<p class="style1">>> Visit Website …. </p>
</div>
</div>
CSS:
#content{
width:90%;
margin-top: 60px;
margin-left:5%;
margin-right:5%;
background-color:#CCC;
background-image:url('images/prodblock.jpg')
background-repeat: no-repeat;
}
.product{
width:318px;
display:block;
float: left;
}
Honestly i have tried every which way i could find online but cannot get this to work :/ i dont see any conflicts here but i might be missing something.
this happens in all the browsers i tested
Thanks for your input in advance.
You are missing a semi-colon at the end of the background-image property and hence, the next property fails i.e background-repeat
background-image:url('images/prodblock.jpg');
--^--
Try this: This happens because of float property. So I added clear div. you can use this as a trick.
<html>
<head>
<style type="text/css">
#content{
width:90%;
margin-top:60px;
margin-left:5%;
margin-right:5%;
background:#ccc url('https://www.google.com/images/srpr/logo4w.png') no-repeat;
}
.product{
width:318px;
display:block;
float: left;
}
</style>
</head>
<body>
<div id="content">
<div class="product">
<p><strong>Wonderful Guest House</strong></p>
<p><img src="images/knysna.jpg" width="282" height="171" align="absmiddle" /></p>
<p>Guest Houses are great alternative accommodation to expensive hotels when travelling for business or for pleasure. Most guest houses offer the same services as big hotels like cooked meals, airport shuttles, satellite TV, internet connectivity and even conferencing facilities.</p>
<p class="style1">Visit Website</p>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
I am trying to develop a web site from scratch. Here is the code
<html>
<head>
</head>
<body >
<div id="top" style="height:200px;background-color:green">
</div>
<div id="middle" style="height:800px;background-color:white">
</div>
<div id="footer" style="height:200px;background-color:green">
</div>
</body>
</html>
Problem is that there is a white space around above div tags. I can remove white space using margin: -10px; property. But I don't like to handle it that way. Is there way to handle this in decent way in css?
<body style="margin: 0;">
Set the margin for the body to 0;
<body style = "margin:0">
Thanks in advance for any help you can offer me - I'm trying to get this page working for my charity's website. It looks perfect in every browser except IE. In IE, the long, vertical image that is supposed to float next to the other images is not aligning horizontally.
You can see it live here: www.worldofchildren.org
References an external stylesheet here:
<link rel="stylesheet" href="/bannerincludes/boxes.css" type="text/css" media="screen">
Here's the on-page code:
<div style="width:868px;">
<div style="float:left; position: relative;margin-left:25px; margin-top:20px;width:533px;"">
<h1 style="font-family: Adobe Garamond Pro, Garamond, serif; font-size: xx-large; font-weight: 500;
color: #0D9B89;
padding: 0px 0px 0px 0px; line-height:90%;">meet the 2012 honorees</h1>
<div style="float:left;">
<div class="hover-div1" style="margin-right:6px; margin-bottom:6px; float:left;">
<img src="http://www.worldofchildren.org/images/banner/dallas.jpg">
<div class="hover-text">Dallas Jessup <br> 2012 Youth Award Winner</div>
</div>
<div class="hover-div2" style="margin-right:6px; margin-bottom:4px; float:left;">
<img src="http://www.worldofchildren.org/images/banner/craig.jpg" >
<div class="hover-text">Craig Kielburger <br> 15th Anniversary Achievement Award Winner</div>
</div>
<div class="hover-div3" style="margin-bottom:6px; float:left;">
<img src="http://www.worldofchildren.org/images/banner/alina.jpg">
<div class="hover-text">Alina Cho <br> 2012 Board of Governors' Award Winner</div>
</div>
<br>
<br>
<div class="hover-div4" style="margin-right:5px; margin-bottom:5px;float:left;">
<img src="http://www.worldofchildren.org/images/banner/dryoung.jpg" >
<div class="hover-text">Dr. Nilas Young <br> 2012 Health Award Winner</div>
</div>
<div class="hover-div5" style="margin-bottom:5px;float:left;">
<img src="http://www.worldofchildren.org/images/banner/kyle.jpg" >
<div class="hover-text">Kyle Weiss <br> 2012 Youth Award Winner</div>
</div>
</div>
<div style="float:right !important;">
<div class="hover-div6" style="margin-bottom:5px;">
<img src="http://www.worldofchildren.org/images/banner/benito.jpg" >
<div class="hover-text"><a href="http://www.worldofchildren.org/honorees/391" style="color:#fff;">
Benoît Duchâ teau-Arminjon<br> 2012 Humanitarian Award Winner</a></div>
</div>
</div>
</div>
<div style="float:right; margin-top:20px;margin-right:30px; ">
<h1 style="font-family: Adobe Garamond Pro, Garamond, serif; font-size: xx-large; font-weight: 500;
color: #0D9B89;
padding: 0px 0px 0px 0px; line-height:90%;">15th annual awards</h1>
<p style="max-width:250px; font-family:helvetica;sans-serif; font-size:14pt;color:#777; font-weight:lighter; line-height:100%;">Join us as we celebrate the work of six exceptional heroes who have dedicated their lives to serving children in need. Much more than a ceremony, our Awards change the lives of those who attend and the children our Honorees serve.</p>
<br>
<center><img src="http://www.worldofchildren.org/images/banner/lm.jpg" border="0"><br>
Interested in Sponsorship Opportunities?<br>
Click here
</center>
</div>
</div>
Put a width of width: 420px; on the DIV you have floated left (the first chunk of boxes). Even though it is floated, IE is giving it the full width of it's parent, so there isn't room for the boxes on the right.
Add a width to your floated containers. Right now, you have no width and IE is filling the inline space with your left floated element.
To debug these things in IE, you can use the IE developer tools.
In IE, hit your F12 key.
In the developer tools, click the "mouse" icon in the top left. This is your selector tool.
Will the selector tool, select the area of your website you are having an issue with.
In your case, you can see the floated left element is too wide, because it's width is currently dynamic. IE is making it fill 100% of the horizontal area.
Instead of float, this works in IE9
position: absolute;
right: 0;
bottom: 0;