Kind of new to css but I have one image I want on top left corner and then another image I want to repeat after that. Currently I tired:
CSS
#topsection{
background: url('../images/bannerBGs.jpg');
background-repeat:no-repeat;
background: url('../images/bannerBGl.jpg');
background-repeat:repeat-x;
height: 200px; /*Height of top section*/
color: White;
text-align:center
}
#topsection a{
color: #FFFF80;
}
#topsection h1{
margin: 0;
padding-top: 25px;
text-align:Left
}
#topsection h2{
margin: 0;
padding-top: 0px;
text-align:Center
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IG Indy Gamers</title>
<link rel="stylesheet" type="text/css" href="CSS/mycss.css" media="screen" />
</head>
<body>
<div id="maincontainer">
<div id="topsection" > <div class="innertube">
<h1>IG -Indy Gamers </h1>
<FONT style="BACKGROUND-COLOR: blue"><p align='right'>  Signup </font> / <a href='Login.html' id='LoginContent' >Login </a></p>
<ul id="list-nav">
<li>Home</li>
<li>Reviews</li>
<li>News</li>
<li>Forums</li>
<li>Demo's</li>
<li>Members</li>
<li>Contact</li>
</ul>
</div></div>
but the second image just copies over the first. Can you suggest another way to do this. I heard using layers may do it but I know nothing about that yet.
Looks like CSS3 supports multiple background images; you specify them separated by commas:
background: url('banner1.jpg'), url('banner2.jpg');
background-position: left top, left top;
background-repeat: no-repeat, repeat;
Play with background-position until it does what you want.
IE < 9 does not support this feature.
You'll need to create 2 containing elements: 1 for the repeating image. And a 2nd for the image in the top left.
In other words, something along the lines of:
<div class="repeatingBgImage">
<div class="otherBgImage">
<!-- content -->
</div>
</div>
CSS works in a, well, cascading manner. Anything you declare can and will be overwritten by the next line in the statement, i.e.,
.someClass {
color: yellow;
color: blue;
}
The final color of the text will be blue, not green (yellow+blue=green).
Given your sample...
#topsection{
background: url('../images/bannerBGs.jpg');
background-repeat:no-repeat;
background: url('../images/bannerBGl.jpg');
background-repeat:repeat-x;
}
... the background image will always be bannerBGl.jpg and repeat-x since it is lower in the declaration of the CSS, thus overwriting the previous bg image and repeat declaration.
If you're targeting new browsers, css3 now can apply two background images on one element. You might want to check this one out
http://www.css3.info/preview/multiple-backgrounds/
you css
/*TOPSECTION */
#topsection{
background: url('../images/bannerBGs.jpg');
background-repeat:no-repeat;
background: url('../images/bannerBGl.jpg');
background-repeat:repeat-x;
height: 200px; /*Height of top section*/
color: White;
text-align:center
}
try this
background-image:url('../images/bannerBGs.jpg'),url('../images/bannerBGl.jpg');
background-repeat: no-repeat, repeat-x;
background-position: left top , 20px 30px;
//background-position adjust second value which in px until you meet your requirment
Thanks!
Related
I am putting in new code as I have been studying, Hopefully this is a clearer picture of what my goal is.
I want to go from a table based to a div setup, I have tried
<div class="image"></div>
with this CSS
div.image:before {
content:url(http://placehold.it/350x150);
}
But I am unsure of the placement of the text, also putting an image in the div as well as making sure the dimension is correct.
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Site</title>
<meta http-equiv="Content Type" content="text/html; charset=utf-8" />
<style type="text/css">
.bgimg {
background-image: ('file:///C:/Location/somimg.jpg');
}
</style>
</head>
<body>
<img src="somimg.jpg" width="246" height="94" alt="sm pic'/>
<div class="bgimg">
</div>
<div class="mainsection">
</div>
</body>
</html>
CSS code:
td {
text-align: left;
vertical-align: top;
font-family:Tahoma;
font-weight: bold;
font-size:15px;
color: #E5E5E5;
}
.div-with-bg
{
width: 263px;
height: 94px;
background-image:url('smpic.jpg');
margin:0;
padding:0;
}
a {
text-decoration: underline;
color:#9D5FBB;
}
A:Hover {
color : #DBACF2;
text-decoration : underline;
}
h1 {
color: #9929bd;
font-weight: normal;
font-size: 20px;
font-family: Tahoma;
}
H3 {
color: #7F409E;
font-weight: bold;
font-size : 20px;
font-family:Tahoma;
}
My goal is to have the div's go out to the edge of the browsers as I have multiple tables that I would like to replace with div elements. I have viewed this setup in a browser and the div and image show up but not at the edge of the page.
I don't know if I understand what you're asking but I just copied your HTML in Sublime text, and did this for css:
div.image:before {
width: 263px;
height: 94px;
background-image:url('somepic.jpg');
content:url(http://placehold.it/350x150);
margin:0;
padding:0;
}
It works for me. I have the left div on the left and the right div next to it.
Also, I would the the style of the divs in the css file:
div.right {
float: "middle"
}
div.left {
float: "left";
}
And for the HTML:
<body>
<div class="image left">Left Div</div>
<div class="right"">Right Div</div>
</body>
And if you want to make your life easier just learn flexbox. The way i learned it was using this site.
.container{
display:flex;
}
<div class="container">
<div>
<img src="http://placehold.it/350x150" />
</div>
<div>
RIGHT
</div>
</div>
This is one way to do it.
However i think that you should change the question into how i can learn to design in the browser (e.g. https://hackernoon.com/css-box-model-45ecf4ac219e) or something like that.
I've started out trying to build a HTML 5 website but have ran into a problem with CSS. Below is a MCVE of the issue:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
div.content {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 75%;
}
div.topbar {
background-color: #777777;
border-bottom: 1px #000000 solid;
color: #FFFFFF;
padding: 5px;
}
</style>
<div class="topBar">
<p>MCVE</p>
</div>
<div class="content">
<p>Here is some content.</p>
</div>
</body>
</html>
If you take out the <!DOCTYPE html> tag, the top bar across the top of the page works but if you put it in, it doesn't render correctly as the background colour of the div element is not rendered and neither is the border.
What am I doing wrong here so that the div.topBar style definition isn't being fully respected?
The problem is that
div.topbar
Should be
div.topBar
Because <div class="topBar"> is not <div class="topbar">
It is still being rendered in quirks mode for some reason but html5 mode wont render it.
(Demo)
HTML and CSS are case sensitive.
'topbar' and 'topBar' are different. Either capitalize the name of the class or correct the div.topbar.
My webpage wont work with IE. I fully validated my webpage with W3C, and I made sure not to use anything that was not supported in all browsers (at least I think I did)
I think I tested it with IE 8 (I don't have IE installed, just used a free webprogram)
Basicly with IE the sidebar took up the full space of the page, and then the rest of the website went below the sidebar. By the way I cannot change things to absolute. (I absolutly can't change it to absolute haha)
http://www.adrianhoulewebprojects.com/
<!--Home Page for adrianhoulewebpojects.com Version 1.0-->
<!--Written by Adrian Houle-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/HomePageStyle.css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Adrian Houle Web Projects</title>
</head>
<body>
<div id="Sidebar">
<h3>Projects</h3>
<ul>
<li>
Under Construction
</li>
<li>Unfinished Project #2</li>
<li>Unfinished Project #3</li>
<li>Unfinished Project #4</li>
<li>Unfinished Project #5</li>
</ul>
</div>
<div class="box">
<div class="HalfSpacer"></div>
<div class="TransBox" id="Header">
<h1>Welcome to<br>AdrianHouleWebProjects.com</h1>
</div>
<div class="Spacer"></div>
<div class="TransBox" id=About>
<h2>About:</h2>
<p>Welcome to my website. I had a bit of time over the holidays and decided to finally get around to learning web programming. The purpose of this website is to give me a place to practice and display what I learn in the form of web projects. I may also be making some blogs that will also serve to showcase my travelling and hobbies. Note: If you are accesing this on a mobile phone you will probaly notice the side bars text is sticking out of its box; this is just part of the joys of web porgraming, I cannot fix it for this page without rewriting it, but my next web page will be compatible.</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="NewStuff">
<h2>Coming Soon</h2>
<ul>
<li>
<h3>Australia Travel Blog</h3>
<img src="http://www.adrianhoulewebprojects.com/img/AustralianFlag100by50.gif" alt="Australian Flag" >
<p>2013-2014 Australia Travel Blog coming soon.</p>
</li>
</ul>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Contact">
<h2>Contact Info:</h2>
<p class="Italic">Please report any compatibility, accessibility, or security issues to:</p>
<p>Adrian Houle</p>
<p>adrianhoule#gmail.com</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Footer">
<p>Website by Adrian Houle</p>
</div>
</div>
<div class="BottomBorder"></div>
</body>
</html>
CSS code
/***************************************** Info *********************************************************/
/*Style Sheet for HomePage of adrianhoulewebprojects.com*/
/*Written by Adrian Houle*/
/*For any issues with my website (compatibility, accessibility, white-hat reports) feel free to contact me at
adrianhoule#gmail.com
/*Page Purpose: Create a homepage that welcomes users to my website and directs them to various projects*/
/***********************************************************************************************************/
/************************************* Table of Contents **************************************************/
/*CSS layout*/
/* -none specific elements*/
/* -classes*/
/* -ID's and children of ID's*/
/* -Other*/
/************************************************************************************************************/
/************************************** CSS code ****************************************************/
/* -none specific elements ***********************************************************************************/
p {
font-size: large;
font-weight: bolder;
}
a {
color: blue;
}
a:hover, a:focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
/* -classes **************************************************************************************************/
/*Element that contains everything except the sidebar and has the main background image.*/
.box {
display: block;
position: relative;
width: 100%; /*test and adjust to keep it from expading the browser*/
height: 100%;
border: 3px solid black;
right: 0;
top: 0px;
padding: 0;
background-image: url(http://www.adrianhoulewebprojects.com/img/CautionStripes.png);
}
/*Allows for synchronised space adjustment between elements*/
.Spacer {
position :relative;
height: 100px;
}
/*Allows for synchronised space adjustment between elements*/
.HalfSpacer {
position :relative;
height: 30px;
}
/*Every element that contains text belongs to this class*/
/*This class has nothing to do with transgender boxes, or gender boxes in general*/
.TransBox {
width: 70%;
padding: 1em;
z-index: 1;
left: 20%;
position: relative;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
moz-box-shadow: 0 0 5px 5px #888; /*shadow effect with cross compatibility*/
webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
.Italic {
font-style: Italic;
}
/* -ID's and children of ID's********************************************************************************/
/*Sidebar, to be fixed to the left hand side of the screen. Must allow conent to the right of it*/
#Sidebar {
height: 100%;
width: 10%;
left: 0px;
top: 0px;
padding: 2%;
display: inline;
position: fixed;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
border-style: solid;
border-width: 3px;
z-index: 2;
}
#Sidebar ul {
padding-left:0;
}
#Sidebar li {
margin: 10%;
}
/*Header text*/
#Header h1 {
text-align: center;
}
#Footer p {
text-align: center;
}
/* -Other (empty)*****************************************************************************************/
Thanks for any help.
You should force IE8 to render with edge:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
It can be placed within the head of your HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- other head tags -->
</head>
<body>
</body>
</html>
Check out this answer for more a more indepth look at how it can be used.
I have several issues with aligning my <div> tags, as can be seen here.
The layout is as so: I have a container header, and inside of it I have a header, a footer and in between them two right and left divs. My problem is with the right and the footer where things aren't aligned to the center even though they are suppose to inherit it from the <body> tag.
Also, for some reason the page can be scrolled to the right a little, and in that little part the background isn't colored.
This is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rock-paper-scissers</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="rps.js"></script>
<style type="text/css">
body{
width: 100%;
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93e1d1), to(#d4c87c));
background-image: -webkit-linear-gradient(left, #93e1d1, #d4c87c);
background-image: -moz-linear-gradient(top, #93e1d1, #d4c87c);
background-repeat: no-repeat;
}
div#footer {
width: 100%;
}
div#container {
text-align: center;
}
div.InnerLeft {
width: 50%;
position: relative;
float: left;
}
div.InnerRight {
width: 50%;
position: relative;
float: right;
}
select {
background: transparent;
width: 220px;
padding: 5px;
font-size: 16px;
border: 0px;
height: 34px;
}
img#andale {
margin-left: auto;
margin-right: auto;
margin-left: 100px;
}
</style>
</head>
<body>
<div id="container">
<img src="header.png">
<div class="InnerLeft">
<img src="uno.png"><br>
<select id="p1" onchange="change('p1','rpsleft')">
<option value=0>Choose your weapon</option>
<option value=1>Rock</option>
<option value=2>Paper</option>
<option value=3>Scissors</option>
</select>
<p><img src="rpsL.png" id="rpsleft"></p>
</div>
<div class="InnerRight">
<img src="dos.png"><br>
<select id="p2" style="margin-left:45%;" onchange="change('p2','rpsright')">
<option value=0>Choose your weapon</option>
<option value=1>Rock</option>
<option value=2>Paper</option>
<option value=3>Scissors</option>
</select>
<p><img src="rps.png" id="rpsright" style="margin-left:45%;"></p>
</div>
<div id="footer">
<img src="andale.png" id="andale" onclick="rps(document.getElementById('p1').value,document.getElementById('p2').value)"
onMouseOver="document.getElementById('andale').src='andale2.png'"
onMouseOut="document.getElementById('andale').src='andale.png'">
</div>
</div>
</body>
Any ideas how I can solve these two little problems?
Thanks!
P.s. I tired to set the image sources to my dropbox and google drive account so they can be seen on jsFiddle, but it doesn't work. Any suggestion as to which site I can use?
Ok, so a few little things...
(sample: http://jsfiddle.net/mori57/cr8s8/29/)
<!-- for one, without a specified width and height
the browser doesn't know how to flow the other elements
around this object ... I used placehold.it to show you what
happens if you put in an object with actual dimensions -->
<img src="http://www.placehold.it/400x50">
Without an image of specified dimensions, because the image can't load by the browser, the browser defaults it to a very small image, and the first float wraps in front of it, as float:left demands.
You /could/ wrap those floats in a container, as well, and force that to clear:both so that it avoids floating in front of your header image.
Secondly:
<!-- Your extra space was due to the margin-left you shimmed onto
this select tag. If you take it out, the extra horiz
scrolling goes away -->
<select id="p2" onchange="change('p2','rpsright')">
Remember that objects with margins /inside/ another container /can/ "poke through" the borders of the container. Thus, it was adding its margin to that of its container, and pushed itself through the "wall" of its container, increasing horizontal space needed.
When I change the position from absolute to relative or anything it completely screws up everything. Sending images everywhere on the layout. I dont know what to do. Please help =[[ Because as it stands now, when a browser is mazimized the text looks off as far as placement on the layout depending on the computer i am testing it on. Website - www.byteknightrepair.com
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org /TR/html4/loose.dtd">
<html>
<head>
<title>-ByteKnight Repair-</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="site_layout.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #2b2b2b;
}
</style>
<link href="site_layout_content.css" rel="stylesheet" type="text/css">
<style type="text/css">
#testimonials {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 220px;
top: 563px;
float: right;
}
body,td,th {
color: #999;
}
#housecalls {
position:absolute;
width:200px;
height:105px;
z-index:2;
left: 504px;
top: 557px;
}
#WhatWeDo {
position:;
width:379px;
height:46px;
z-index:3;
left: 201px;
top: 222px;
}
</style>
<link href="site_layout_whatwedo.css" rel="stylesheet" type="text/css">
<style type="text/css">
#Description {
position:absolute;
width:326px;
height:73px;
z-index:4;
left: 219px;
top: 289px;
}
#news {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 804px;
top: 556px;
}
#apDiv6 {
position:absolute;
width:200px;
height:115px;
z-index:6;
left: 721px;
top: 390px;
}
</style>
Waoh, well, my first suggestion would be to start anew and position everything correctly. The text on your page is flying everywhere because they're not properly contained and are just manually positioned across the screen, absolutely positioned relative to the screen you were using at the time, thus why they are flying everywhere (not everybody has the same screen size). Here are a few things you can do to do a quick fix:
td {
vertical-align:top;
}
#description {
padding:30px;
position:absolute;
width:326px;
}
Later remove your "What we do" div and just incase it inside your "description" div, like so:
<div id="Description">
<h2>What we do</h2>
<p>ByteKnight Repair is a local, San Fernando Valley based computer repair and servicing company that services both PC desktops and laptops of all brands.</p></div>
That should stop that piece of text from floating around when the screen is resized.
Now on to your Prices page.
First, format your #apDiv5 id to this:
#apDiv5 {
color:#ccc;
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
font-size:12px;
position:absolute;
width:255px;
}
And then, fix the td encasing that that div, placing the image "below" the content, like so:
<td colspan="3" rowspan="4">
<div id="apDiv5">
<p>The squire tune-up includes: </p>
<ul>
<li>Clear Cache</li>
<li>Clear Pagefiles</li>
<li>Virus Scan</li>
<li>Virus Removal</li>
<li>Spyware Scan</li>
<li>Spyware Removal</li>
<li>Registry Cleaning</li>
<li>Registry Defragmentation</li>
<li>Hard Drive Test</li>
<li>RAM Test</li>
<li>CPU Thermal Test</li>
<li>Configure Windows Updates</li>
<li>Remove Unneeded Startup Programs</li>
</ul>
</div><img width="260" height="350" src="images/prices_28.jpg" alt="">
</td>
Also, on your "Knightly Tune-up" section, change the #apDiv4 id on that div to #apDiv5.
That should fix most of your alignment problems, although i highly suggest starting from scratch, you can easily position such design with tables alone. Also, try to make all this changes through the regular editor and not through the visual editor.
As always, if it works it works, no matter how it is set up. Good luck.