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>
Related
I need to put a price (text) over some thumbnails. I found the following code which works..
CSS
.col-md-4 {
display: table;
}
.thumbnail{
position:relative;
}
.thumbnail img{
max-width:100%;
}
.thumbnail h1{
position:absolute;
top:50%;
left:0;
color:lightgrey;
width:100%;
text-align:center;
transform:translateY(-50%); /* doesn't work in IE9 and older I'm affraid */
margin:0;
}
ASP.NET
<div class="col-md-4">
<div class="thumbnail">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Nail(thumb).jpg">
<h1>Hello</h1>
</div>
</div>
However, I want to try to and integrate the above to the following complicated code line and I haven't got a clue where to start (It was written for me). Here's the line..
Dim liByLiteral As New LiteralControl("<li><img class='lazy" & opacity & "' data-src='http://images.example.com/thumbnails/" & filenameAndPrice(0) & "' height='120' width='120' src='./files/images/loader.png' /></li>")
filenameAndPrice(4) is the price of the item. I'm happy with it being added to the Nyromodal Title but needs to be displayed over the thumbnail image as well. Any help is really appreciated.
add runat server attribute and give Ids to your html controls.
<div class="col-md-4">
<div class="thumbnail">
<img runat="server" id="tmdiv" src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Nail(thumb).jpg">
<h1 runat="server" id="myheaderid" >Hello</h1>
</div>
</div>
On the server, now you can access these and can add any html attribute.
like ;
myheaderid.InnerHtml= liByLiteral
tmdiv.atrributes.add("title", filenameAndPrice(4))
I have received one design from my designer and he wants to write CSS for him. I tried as below:
.o__header{
width: 1080px;
position:relative;
left:40px;top:135px;
}
.o--text{font-size:14px;color:#fff;position:absolute;top:-210px}
.o--head {font-size:40px;color:#fff;position:absolute;top:-310px}
.o--image {position:absolute;
top:0px;
left:0;
right:0px;
bottom:0;}
<div class="o__header">
<div small="6" medium="6" large="6">
<h1 class="o--head">Page Header Goes Here</h1><br/>
<p class="o--text">Small hep description here</p>
</div>
<div small="6" medium="6" large="6">
<img src ="img/img.PNG" style="max-
width: 100%;height:auto;" styleClass="o--image">
</div>
</div>
where small,large and medium are custom created mixins.
But this approach is not working great. I want it resposnive too. How to go about that?
below is the layout
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>
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.
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;