I am creating a website for a small project. One of the web pages includes a slideshow that should be manually operated using two buttons. How can i have the buttons placed infront of the slideshow image?
.slideshow-container {
border: solid black 5px;
border-radius: 20px;
margin: 70px;
box-shadow: -40px -40px 0px 10px #f0f030, -40px -40px 0px 15px black;
width: 550px;
}
#slideShowImage {
width: 100%;
border-radius: 3%;
display: block;
}
.slideshow-buttons {
display: flex;
justify-content: space-around;
}
<section class="slideshow-container">
<img id="slideShowImage" src="https://via.placeholder.com/450x150" alt="slideshow">
<div class="slideshow-buttons">
<button class="slideshow-button-right" onclick="plusDivs(-1)">❮</button>
<button class="slideshow-button-left" onclick="plusDivs(+1)">❯</button>
</div>
</section>
<footer class="footer">
</footer>
I have tried changing the position on the image to absolute and the buttons to relative (& the other way around because i dont know what im doing)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Womxn Skate History</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="..\css\bootstrap.min.css">
</head>
<header>
</header>
<body >
<section class="slideshow-container">
<img id="slideShowImage" src="img1.jpeg" alt="slideshow"/>
<div class="slideshow-buttons">
<button class="slideshow-button-right" onclick="plusDivs(-1)">❮</button>
<button class="slideshow-button-left" onclick="plusDivs(+1)">❯</button>
</div>
</section>
</div>
</body>
<footer class="footer">
</footer>
<script src="JS/script.js"> </script>
</html>
CSS:
.slideshow-container {
border: solid black 5px;
border-radius: 20px;
margin: 70px;
box-shadow: -40px -40px 0px 10px #f0f030, -40px -40px 0px 15px black;
width: 550px;
position: relative;
}
#slideShowImage {
width: 100%;
border-radius: 3%;
display: block;
object-fit: cover;
}
.slideshow-button-right {
position: absolute;
left: 15px;
top: 50%;
}
.slideshow-button-left {
position: absolute;
right: 15px;
top: 50%;
}
Related
I'm a newbie at this. I have a problem. I'm creating a personal page where I want a background-color in the top part of the page (covering a section) and I want another background-color in the middle of the page (covering another section).
The thing is that I did that but when I go to developer tools the design it doesn't responsive. My body background kinda "creates" a margin aside my second background.
I don't know if I'm explain it well but here is my code and the bug that I have:
* {
font-family: 'Fredoka', sans-serif;
margin: 0%;
padding: 0%;
}
body {
background-color: #3a5056;
color: white;
text-align: center;
}
html,
body {
height: 100%;
}
.middle {
background-color: white;
height: 1866px;
padding: 50px;
margin-top: 230px;
}
.cards-list {
z-index: 0;
width: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.card {
margin: 30px auto;
width: 300px;
height: 300px;
border-radius: 40px;
box-shadow: 5px 5px 30px 7px rgba(0, 0, 0, 0.25), -5px -5px 30px 7px rgba(0, 0, 0, 0.22);
cursor: pointer;
transition: 0.4s;
}
.card .card_image {
width: inherit;
height: inherit;
border-radius: 40px;
}
.card .card_image img {
width: inherit;
height: inherit;
border-radius: 40px;
object-fit: cover;
}
.card .card_title {
text-align: center;
border-radius: 0px 0px 40px 40px;
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
margin-top: -80px;
height: 40px;
color: #2c3d42;
}
section .intro {
height: 40px;
width: 850px;
padding: 6%;
}
.intro {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
min-width: 850px;
}
.intro:nth-child() {
align-self: center;
}
.abt-me {
position: relative;
width: 800px;
height: 250px;
padding: 1%;
color: #2c3d42;
display: block;
content: "";
margin-top: -2550px;
border: 1px hidden;
font-size: 18px;
border-radius: 40px;
box-shadow: 5px 5px 30px 7px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 2px 3px 17px 6px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 3px 17px 6px rgba(0, 0, 0, 0.3);
}
.text-box {
padding: 1%;
margin-top: -8px;
font-size: 21px;
width: 750px;
height: 250px;
margin-left: 2%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<title></title>
</head>
<body>
<section class="main">
<div id="name">
<h1>Hello, I'm <span id="me">Sapph</span></h1>
</div>
<div id="scroll">
<section id="section02" class="demo">
<span></span>
</section>
</div>
<nav class="social">
<ul>
<li>Twitter <i class="fa fa-twitter"></i></li>
<li>Github <i class="fa fa-github"></i></li>
<li>Linkedin <i class="fa fa-linkedin"></i></li>
</ul>
</nav>
</section>
<section class="middle">
<div id="cards">
<div class="cards-list">
<div class="card 1">
<div class="card_image"></div>
<div class="card_title title-white">
<p>Contact</p>
</div>
</div>
<div class="card 3">
<div class="card_image">
</div>
<div class="card_title">
<p>Projects</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="intro">
<div class="abt-me">
<h2 style="margin-bottom: 12px" ;><b>
About Me</b>
</h2>
<div class="text-box">
<p>
<center>Hello, I'm...</center>
</p>
</div>
</div>
</section>
<footer>© Copyright</footer>
</body>
</html>
This is my problem: https://prnt.sc/w4Zkw0QU7P67
This is what I need: https://prnt.sc/UhNmn4djohPS
I took the photos in the developer tools. Thanks
Try to find the #media section for max-width:890px in your style.css and edit the "section" tag style. or past the below code on your page, this should help. It is the amount of padding added on the section for screen width less than 890px.
#media only screen and (max-width: 890px) {
section{
margin: 0px;
padding: 10px;
}
}
If you want to change the section style for all screen widths just use:
#media only screen and (min-width: 360px) and (max-width: 1360px) {
section{
margin: 0px;
padding: 10px;
}
}
I'm working on header section where there are 3 spans, one floating to the left, one floating to the right and the other span in the middle. The middle span is not getting horizontally aligned no matter what.
body{
font-family: Myriad Set Pro;
margin: 0;
}
/* ===================== Header Section =============================*/
#header{
width: 100%;
position: fixed;
height: 75px;
line-height: 75px;
box-shadow: 5px 5px 5px #edeff2;
text-align: center;
}
#position{
float: right;
margin-right: 10px;
/*width: 20px;*/
/*margin-top: -75px;*/
}
#logo{
float: left;
height: inherit;
}
#logo:hover{
cursor: pointer;
}
#name{
border: 1px solid black;
position: absolute;
margin: 0px auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dash Html</title>
<link rel="stylesheet" type="text/css" href="dash.css">
</head>
<body>
<div id="header">
<a href="https://www.google.com" target="_blank">
<img src="abc.png" id="logo">
</a>
<span id="position"> Developer Developer </span>
<span id="name">SKSV</span>
</div>
</body>
</html>
Here is a simpler solution. Wrap them in a parent div and make the width equal. Take a look at the following:
body{
font-family: Myriad Set Pro;
margin: 0;
}
/* ===================== Header Section =============================*/
#header{
width: 100%;
position: fixed;
height: 75px;
line-height: 75px;
box-shadow: 5px 5px 5px #edeff2;
text-align: center;
font-size:0;
}
.header-col
{
display:inline-block;
width:33.3333333334%;
vertical-align:middle;
font-size:13px;
}
#position{
display:block;
text-align:right;
}
#logo{
display:block;
text-align:left;
}
#name{
border: 1px solid black;
display:block;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dash Html</title>
<link rel="stylesheet" type="text/css" href="dash.css">
</head>
<body>
<div id="header">
<div class="header-col">
<a href="https://www.google.com" target="_blank" id="logo">
<img src="abc.png">
</a>
</div>
<div class="header-col">
<span id="name">SKSV</span>
</div>
<div class="header-col">
<span id="position"> Developer Developer </span>
</div>
</div>
</body>
</html>
I would use left: 50%. Here. I this what you wanted:
body{
font-family: Myriad Set Pro;
margin: 0;
}
/* ===================== Header Section =============================*/
#header{
width: 100%;
position: fixed;
height: 75px;
line-height: 75px;
box-shadow: 5px 5px 5px #edeff2;
text-align: center;
}
#position{
float: right;
margin-right: 10px;
/*width: 20px;*/
/*margin-top: -75px;*/
}
#logo{
float: left;
height: inherit;
}
#logo:hover{
cursor: pointer;
}
#name{
border: 1px solid black;
position: absolute;
margin: 0px auto;
left: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dash Html</title>
<link rel="stylesheet" type="text/css" href="dash.css">
</head>
<body>
<div id="header">
<a href="https://www.google.com" target="_blank">
<img src="abc.png" id="logo">
</a>
<span id="position"> Developer Developer </span>
<span id="name">SKSV</span>
</div>
</body>
</html>
I am trying to create this Logo with CSS
Logo
The Reason I want to recreate in CSS is so that I can animate each individual circle? I am using Materialize Framework here is a copy of my first horrible attempt.
.hero {
background-color: #7EEDE2;
height: 100vh;
margin: 0;
padding: 0;
z-index: 1;
}
.circleOne {
margin: auto;
top: 50%;
width: 200px;
height: 200px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border: 10px solid gray;
border-bottom: 0;
}
.circleTwo {
margin: auto;
top: 50%;
width: 150px;
height: 150px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border: 10px solid gray;
border-bottom: 0;
}
.circleThree {
margin: auto;
top: 50%;
width: 100px;
height: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border: 10px solid gray;
border-bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--Import Google Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Import Framework -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link rel="stylesheet" href="css/animate.css">
<!--Import Style Sheets-->
<link href="css/main.css" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>SpecterMedia</title>
</head>
<body>
<nav class="darkBlue" role="navigation">
<div class="nav-wrapper">
<a id="logo-container" href="#" class="brand-logo center">Secter<span>Media</span></a>
</div>
</nav>
<div class="row hero valign-wrapper">
<div class="col s4 offset-s4">
<div class="circleOne"><div class="circleTwo"><div class="circleThree"></div></div></div>
<h5 class="center"> Catchy Text </h5>
<div class="section center">
<a class="waves-effect waves-light btn-large hoverable">Get Your Free Quote Now</a>
</div>
</div>
</div>
<div class="row">
<div class="col s12 intro">
</div>
<!--Import jQuery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--Import frameworkjs-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
</body>
</html>
Hokay, figuring out a logical way to accomplish that took a while but I believe I've got it.
The following generates 3 quarters of a circle.
div {
border: 5px solid blue;
border-top-color: transparent;
border-radius: 50%;
margin: 5px;
}
3 of these were nested inside eachother and the margin spaced them out.
Sticking the plain text S within the innermost div worked fine except for the fact that you wanted the div elements to be transformed (rotated) and there's no way to stop that from being inherited so the S was rotating with its parent.
The S got its own element and was given absolute positioning and the container was given alignment to center it akin to a table cell:
#container {
background: grey;
display: table-cell;
text-align: center;
}
h3 {
line-height: 120px;
width: 120px;
position: absolute;
margin: 0;
}
The innermost div was then an appropriate size that made it and its parents grow to accompany the entirety of the container so it was centered with the S, given the margins and borders it was 60px.
Play around with it. It's relatively dynamic but you'll have to do a little bit of math to make sure everything's aligned.
Here's the fiddle: https://jsfiddle.net/JackHasaKeyboard/k6gw9en3/1/
Instead of using "top" you need to use "margin-top" because your divs aren't absolutely or fixed positioned
.hero {
background-color: #7EEDE2;
height: 100vh;
margin: 0;
padding: 0;
z-index: 1;
}
.circleOne {
margin: auto;
top: 50%;
width: 200px;
height: 200px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border: 10px solid gray;
border-bottom: 0;
}
.circleTwo {
margin: auto;
margin-top: 8%;
width: 150px;
height: 150px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border: 10px solid gray;
border-bottom: 0;
}
.circleThree {
margin: auto;
margin-top: 10%;
width: 100px;
height: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border: 10px solid gray;
border-bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--Import Google Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Import Framework -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link rel="stylesheet" href="css/animate.css">
<!--Import Style Sheets-->
<link href="css/main.css" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>SpecterMedia</title>
</head>
<body>
<nav class="darkBlue" role="navigation">
<div class="nav-wrapper">
<a id="logo-container" href="#" class="brand-logo center">Secter<span>Media</span></a>
</div>
</nav>
<div class="row hero valign-wrapper">
<div class="col s4 offset-s4">
<div class="circleOne"><div class="circleTwo"><div class="circleThree"></div></div></div>
<h5 class="center"> Catchy Text </h5>
<div class="section center">
<a class="waves-effect waves-light btn-large hoverable">Get Your Free Quote Now</a>
</div>
</div>
</div>
<div class="row">
<div class="col s12 intro">
</div>
<!--Import jQuery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--Import frameworkjs-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
</body>
</html>
I am developing a basic website using HTML and CSS and my background image will not show up in the section? Any help?
Here is my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Desc">
<meta name="author" content="Lewis Beard">
<META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">
<title>Lewis Beard Lighting Design</title>
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body id="page-top">
<section id="title">
<div class="container" >
<p><center>LEWIS BEARD LIGHTING DESIGN</center></p>
</div>
</section>
<div id="header" style="filter: url(/files/theme/grayscale.svg#grayscale);"></div>
<section id="nav">
<div class="container">
<p><a class="page-scroll" href="#about">About</a> - <a class="page-scroll" href="#portfolio">Projects</a> - <a class="page-scroll" href="#design">Design</a> - <a class="page-scroll" href="#contact">Contact</a></p>
</div>
</section>
<section id="about">
<div class="container" style="text-align:center;">
<h4>Design Differently</h4>
<hr>
<p></p>
</div>
</section>
<section id="portfolio">
<div class="container" style="text-align:center;">
<h4>Projects</h4>
<hr style="width:10%">
<p></p>
</div>
</section>
<section id="design">
<div class="container" style="text-align:center;">
<h4>Design Differently</h4>
<hr>
<table style="text-align:center;width:60%;margin-left:20%;">
<tr><td><i class="fa fa-4x fa-arrows"></i></td><td><i class="fa fa-4x fa-lightbulb-o"></i></td><td><i class="fa fa-4x fa-paper-plane"></i></td><td><i class="fa fa-4x fa-paper-plane"></i></td></tr>
</table>
</div>
</section>
<section id="contact">
<div class="container" style="text-align:center;">
<p>Contact Lewis!</p>
</div>
</section>
<section id="footer">
<div class="container" >
<div style="text-align:left">
<p><br>Links Here</p>
</div>
<div style="text-align:right;">
<p>COPYRIGHT LEWIS BEARD LIGHTING DESIGN 2016<br>ALL RIGHTS RESERVED</p>
</div>
</div>
</section>
<section id="designby">
<div class="container" >
<p><center>Designed By Code After Code</center></p>
</div>
</section>
</body>
</head>
This is my CSS file:
html,
body{
height:100%;
}
body{
font-family:Merriweather,'Helvetica Neue',Arial,sans-serif;
}
#title {
height: 40px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #fff;
}
header {
height: 500px;
background: url(blue.png) no-repeat center fixed;
background-size: cover;
}
#nav {
height: 40px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #808000;
}
#about {
height: 400px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
color: #fff;
background: #2d5f74;
border-bottom:0px #fff solid;
}
#portfolio {
height: 400px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
color: #2d5f74;
background: #E7E5DF;
border-bottom:100px #fff solid;
}
avo {
height: 400px;
background: url(avo.jpg) no-repeat center fixed;
background-size: cover;
}
#design {
height: 400px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #E7E5DF;
}
#gallery {
height: 400px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #808000;
}
#contact {
height: 200px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #D3D0CB;
}
#social {
height: 100px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #fff;
}
#footer {
height: 150px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
color: #fff;
background: #393E41;
}
#designby {
height: 50px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
color: #fff;
background: #808000;
}
The image is in the same folder as the rest of the code and is a standard image - there are no console errors in the logs and therefore i am unable to find out what it is! Any help would be appreciated! Thanks in advance!
Try this fiddle.
css:
#header {
height: 500px;
background: url(http://p1.pichost.me/i/54/1774604.jpg) no-repeat center fixed;
background-size: cover;
}
To target this:
<div id="header" style="filter: url(/files/theme/grayscale.svg#grayscale);"></div>
You need a # before:
header {
height: 500px;
background: url(blue.png) no-repeat center fixed;
background-size: cover;
}
giving
#header {
height: 500px;
background: url(blue.png) no-repeat center fixed;
background-size: cover;
}
Hi guys I have a question that is why does the whole page of my website move slightly to the left (10 - 30 px or so) when I insert an image and goes back to normal when I remove it. Any help at all is appreciated.
Html code-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="description" content="Random Text">
<meta name="keywords" content="Random words">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>X</title>
<link href="menusheet.css" rel="stylesheet" type="text/css">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="header">
<div id="logo"><img src="images/bar.png" alt="knives"/></div>
</div>
<div id="wrapper">
<!-- Black Menu -->
<div id="menu_wrapper" class="black">
<div class="left"></div>
<ul id="menu">
</div>
</div>
<div id="content">
<div id="container">
<div id="adsense">
</div>
<div id="stepsbox">
</div>
</div>
<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>
</div>
<div id="footer">
<div id="footerleft">
<ul>
<li>Home</li>
<li>Site Map</li>
</ul>
</div>
<div id="footercenter">
© 2013 x.com
</div>
</div>
CSS -
body {
width: 960px;
margin: 0 auto;
font-family: Arial, Verdana, sans-serif;
color: black;
background-image: url(images/bg.jpg) ;
background-repeat: no-repeat;
background-size: cover;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
#content {
width: 920px;
height: 100%;
overflow: hidden;
background-color: white;
padding: 0px 20px 0px 20px;
margin: 0px 0px 0px 0px;
}
#container {
width: 300px;
height: 550px;
float: right;
background-color: black;
margin-left: 10px;
}
#adsense {
width: 300px;
height: 250px;
float: right;
background-color: yellow;
}
#stepsbox {
float:right;
width: 250px;
height: 220px;
padding: 15px 15px 15px 15px;
background-color: #E0E0E0;
margin: 10px 0px 5px 10px;
}
#header {
height: 70px;
background: white;
width: 960px;
margin: 0 auto;
}
#footer {
height: 60px;
font-size: 80%;
padding: 5px 5px 5px 5px;
background-color: #333333;
color: white;
}
#footerleft {
width: 300px;
height: 50px;
float: left;
}
#footercenter {
width: 620px;
height: 40px;
float: right;
text-align: right;
padding: 5px 5px;
border-style:solid;
border-width:5px;
}
Can't seen your images... :D, But in your places I insert into css this code
img{
margin: 0px;
padding: 0px;
border: 0px;
}
This remove any spaces aruound the images tag... try it and look forward...
It, Would be grate if you insert a image link... :)
EASLY to understand
Talking about which image "logo" or
<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>
if Factory edge is the image then add one after
<h4>Factory edges</h4><br />
<img src="images/factoryangle.png" alt="Factory angles"style="float:left; margin:0 20px 0 0; width:175px; height:175px;" />
Also add this in style
#content{margin:0 auto; }
with other properties in content
I think this will do, if not please explain in detail.. :)