I have a 3 column layout which is successfully giving me 3 columns; however, my third column (similar to my first column) needs margin and padding changes. Unfortunately, I seem unable to adjust margin and padding for that column. I'm not really sure the issue and googling is bringing me no answers.
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
background: #ecf0f1;
color: #2c3e50;
font-family: "Georgia", serif;
}
h1, h2 {
font-family: "Franklin Gothic", sans-serif;
}
.header h1 {
background: #2c3e50;
color:#ecf0f1;
margin: 10px;
padding: 25px 15px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
}
.row {
margin: 0;
padding: 0;
font-size: 0;
}
.row div {
margin: 0;
padding: 0;
font-size: 18px;
}
.col-3 {
width: 25%;
display: inline-block;
}
.col-6 {
width: 50%;
display: inline-block;
}
.menu {
float: left;
}
.menu ul {
list-style-type: none;
margin: 10px 0px;
padding: 0;
}
.menu li {
background: #2980b9;
padding: 10px;
color: #ecf0f1;
padding: 10px;
margin: 5px 25px;
font-family: "Franklin Gothic", sans-serif;
-webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
}
.right {
float:right;
}
.right p {
margin: 10px;
}
.aside {
text-align: center;
background: #2980b9;
height: 390px;
color: #ecf0f1;
-webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
/* THESE DO NOT WORK AND I CAN'T FIGURE OUT WHY */
margin: 25px;
padding: 25px;
}
.footer {
width: 100%;
position: absolute;
bottom: 0;
}
.footer p {
-webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
padding: 50px 0px;
background: #2980b9;
text-align: center;
color: #ecf0f1;
margin: 10px 10px;
}
HTML:
<html>
<head>
<meta chrset="utf-8" />
<title>CMST-290 Project 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1>Jacob Johnson</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>Education</li>
<li>Software</li>
<li>Skills</li>
<li>Awards</li>
<li>Experience</li>
<li>Projects</li>
</ul>
</div>
<div class="col-6">
<h1>Career Objective</h1>
<p>
I want to ensure quality in everything I do. I will work hard to achieve the goals my employer has for as well the goals I have set for myself.
</p>
</div>
<div class="col-3 right">
<div class="aside">
<h2>Developer</h2>
<p>I am familiar with front end tools such as HTML/CSS and JavaScript in addition to languages like C#, Python, and Java.</p>
<h2>Designer</h2>
<p>I have designed several websites from scratch.</p>
<h2>Student</h2>
<p>I am always eager to learn and keep improving my skills.</p>
</div>
</div>
</div>
<div class="footer">
<p>Copyright © 2017 | Jacob B. Johnson</p>
</div>
<script type="text/javascript" src="/d2l/common/math/MathML.js?v=10.6.10.5455-164 "></script>
<script type="text/javascript">document.addEventListener('DOMContentLoaded', function() { D2LMathML.DesktopInit('https://s.brightspace.com/lib/mathjax/2.6.1/MathJax.js?config=MML_HTMLorMML','https://s.brightspace.com/lib/mathjax/2.6.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML'); });</script>
</body>
</html>
CodePen link
Any insight would be awesome as to why I was so easily able to adjust the left-most column but not the right-most. Thanks.
Your styles on aside are being ignored because the .row div selector is more specific, and therefore overriding margin and padding to zero.
Adding this should make it work:
.right .aside {
margin: 25px;
padding: 25px;
}
You just need higher specificity because you've used .row div with margin: 0; padding: 0;. So to override that CSS with a margin or padding change, you will need to use .row in front of a selector like .col-3, so that the rule is .row .col-3 { /* margin/padding *}
You can read more about specificity here - https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Related
I am setting up a new web page and making a horizontal menu. The hypertext is made by 2 words. It should be in one row, but actually one word = 1 row. I have here in CSS a hover effect over it, whenever the hover effect works, the hypertext is in this moment in one row. I am a little bit lost and confused. I don't know what to change, can you help me?
I have already tried changing in CSS display attribute to table, block, solid. Also I have tried min-width, with hopes that text will expand on one line, but it didn't helped at all. Also I tried to change margin and padding but nothing changed.
https://i.stack.imgur.com/AgqOJ.jpg
HTML
<div id ="panel">
<img src= "Logo.jpg" alt="Logo">
<h3>Nabidka</h3>
<ul>
<br />
<br />
<br />
<li>Hlavní stránka</li>
<li>Program 2020</li>
<li>Kde sídlíme</li>
<li>Organizátoři</li>
<li>O nás</li>
<li>Galerie</li>
<li class ="last">Facebook</li>
</ul>
</div>
CSS
#panel{
width: 15%;
float: left;
background: rgb(153,153,153);
padding: 5px 0 0 0;
}
#panel h3{
display: none;
}
#panel ul{
margin: 0;
padding: 0;
list-style-type: none;
background: rgb(153,153,153);
}
#panel li{
/*border-top: 0px solid rgb(0,176,176);*/
/*border-width: 2px 0px 0px 0px;*/ /*line between hypertexts*/
/*margin: 0px 0px 0px 0px;*/
/*margin-bottom: 1px;*/
display: block;
}
#panel a{
display: block;
width: 100px;
height: 30px;
color: black;
font-size: 120%;
font-weight: bold;
text-decoration: none;
padding: 6px 185px 6px 4px;
margin: 5px 0px 0px 0px;
background: rgb(153,153,153);
}
#panel a:hover{ /*redrawing*/
color: white;
text-decoration: none;
background: rgb(0,0,0);
padding: 4px 0px 4px 2px;
min-width: 100%;
}
#panel li.spodni{
height: 1500px;
}
img {
width: 200px;
height: 200px;
padding: 0px 0px 0px 20px;
}
The a tag width has been limited in normal state:
#panel a{
display: block;
width: 100px; --> this line
height: 30px;
color: black;
font-size: 120%;
font-weight: bold;
text-decoration: none;
padding: 6px 185px 6px 4px;
margin: 5px 0px 0px 0px;
background: rgb(153,153,153);
}
You could remove the line width: 100px; because display:block will set the element width to 100% of its container.
the width in your a tag selector in CSS was limiting the width of the elements forcing a text wrap. this fixes it
<div id ="panel">
<img src= "Logo.jpg" alt="Logo">
<h3>Nabidka</h3>
<ul>
<br />
<br />
<br />
<li>Hlavní stránka</li>
<li>Program 2020</li>
<li>Kde sídlíme</li>
<li>Organizátoři</li>
<li>O nás</li>
<li>Galerie</li>
<li class ="last">Facebook</li>
</ul>
</div>
<style>
#panel{
width: 15%;
float: left;
background: rgb(153,153,153);
padding: 5px 0 0 0;
}
#panel h3{
display: none;
}
#panel ul{
margin: 0;
padding: 0;
list-style-type: none;
background: rgb(153,153,153);
}
#panel li{
/*border-top: 0px solid rgb(0,176,176);*/
/*border-width: 2px 0px 0px 0px;*/ /*line between hypertexts*/
/*margin: 0px 0px 0px 0px;*/
/*margin-bottom: 1px;*/
display: block;
}
#panel a{
display: block;
width: 150px;
height: 30px;
color: black;
font-size: 120%;
font-weight: bold;
text-decoration: none;
padding: 6px 185px 6px 4px;
margin: 5px 0px 0px 0px;
background: rgb(153,153,153);
}
#panel a:hover{ /*redrawing*/
color: white;
text-decoration: none;
background: rgb(0,0,0);
padding: 4px 0px 4px 2px;
min-width: 100%;
}
#panel li.spodni{
height: 1500px;
}
img {
width: 200px;
height: 200px;
padding: 0px 0px 0px 20px;
}
</style>
I have this page which is a page for showing a product and what I'm trying to do is to have the image of the product on the right side and on the left side having the name, price and add to cart button. I use vertical align on img so the text goes to top but doing this means I have to use display inline-block so I can't use block to make the texts go one every line. I also tried to use <br> but it makes the text go under the image.
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
display: inline-block;
}
<body>
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name">name of product</div><br>
<div class="price">$59.99</div>
</article>
</body>
And this is what I'm trying to make:
.image{
margin: 0 50px;
float: right;
border: 1px solid black;
width: 100px;
height: 100px;
}
.text{
float: right;
}
<body>
<span class="image">IMAGE</span>
<span class="text">text</span><br>
<span class="text">text</span>
</body>
instead of adding outside div , add it inside.
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
display: inline-block;
}
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name">name of product<br><div class="price">$59.99</div></div><br>
</article>
just style it
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
font-size: 15px;
font-weight: normal;
}
<body>
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name"><h2>name of product</h2><h3 class="price">$59.99</h3></div>
</article>
</body>
I am trying to center a div, but it is not working. As you can see in the code below, I have the margin set, but the div doesn't move to the center.
body {
margin: 0;
padding: 0;
font-family: Helvetica;
font-weight: bold;
}
.body {
margin: 0 auto;
}
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
li {
float: left;
}
li a {
color: white;
display: block;
padding: 14px 16px;
text-align: center;
text-decoration: none;
}
.one, .two, .three, .name {
border-bottom: 4px solid black;
}
.one:hover {
border-color: #ED08FD;
}
.two:hover {
border-color: #0821FD;
}
.three:hover {
border-color: #FF41C0;
}
.name:hover {
border-color: #DAD8D9;
}
.name {
color: white;
padding-left: 15px;
}
.main-body {
text-align: center;
}
hr {
border: 1px solid #6E6E6E;
}
.circle-row {
width: 100px;ext-align: left;
padding-left: 4cm;
font-size: 35px;
}
.welcomeHeader, .background {
border: 2px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div class="body">
<div class="navbar">
<ul>
<li class="name">JordanCodes</li>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
</div>
<div class="header">
<img src="header-background.jpg">
</div>
<div class="main-body">
<h1 id="welcomeHeader">JordanCodes</h1>
<br>
<br>
<br>
<br>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
I have tried setting the width to 50%, which works, but since have the ul width set to 700px the div doesn't center properly.
If you want to center your ul element, try adding this:
body {width:100%;}
ul {margin:auto;}
please see: https://jsfiddle.net/ty8858hq/
on your styles.css try changing this:
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
to this:
ul {
list-style-type: none;
background-color: black;
margin: 0 auto 0; /* When 3 values are entered, the first one is the value for the top margin, the second is for the horizontal margin and the third one is for the bottom margin */
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
this should make your navbar to display at the center of your page, i hope this works well for you!
The property I'm using to center, or at least make it close to center should work. What I've done is added this css.
.one {
margin-left: 125px /*you can modify this*/;
}
You can also change the .one to .name, but .one looks better;
body {
margin: 0;
padding: 0;
font-family: Helvetica;
font-weight: bold;
}
.body {
margin: 0 auto;
}
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
li {
float: left;
}
li a {
color: white;
display: block;
padding: 14px 16px;
text-align: center;
text-decoration: none;
}
.one {
margin-left: 125px;
}
.one, .two, .three, .name {
border-bottom: 4px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div class="body">
<div class="navbar">
<ul>
<li class="name">JordanCodes</li>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
</div>
<div class="header">
<img src="header-background.jpg">
</div>
<div class="main-body">
<h1 id="welcomeHeader">JordanCodes</h1>
<br>
<br>
<br>
<br>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
I have a banner right above a navigation menu. The two have their own container divs going horizontally across the screen. I have box shadows on both of them to make it look like outer glow. The issue is that the shadow breaks(as it's meant to) between the banner and the navigation. Is there any way that I can modify my code to make it look like the shadows are one? Thanks for your time.
http://i.imgur.com/dJ69OyV.gif
My HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blah Blah</title>
<link href="assets/css/theme.css" rel="stylesheet" type="text/css">
<link href="assets/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapperOuter">
<header>
<div id="bannerContainer">
<div id="banner">
<h1>Scott <span class="green">H.</span> Lacey</h1>
<p>Web Developer <span class="green">♠</span> Photographer <span class="green">♠</span> Musician</p>
</div>
</div>
<div id="toolbarContainer">
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Services</li>
<li>Resume</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div id="toolbar">
<div id="social">
<label>Connect With</label>
<ul>
<li><i class="fa fa-facebook-square"></i></li>
<li><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-facebook-"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
</ul>
</div>
<div id="search">
<form action="#" method="POST">
<input type="text" name="searchCriteria" size="30" placeholder="Enter search text, then press enter.">
</form>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
My CSS:
#charset "utf-8";
/* CSS Document */
span.green {
color: #66cc00;
}
body {
background: url(../img/bodyBackground.gif) repeat-x #000;
padding: 0;
margin: 0;
font-family: Verdana;
font-size: 1em;
color: #666666;
}
a {
color: #66cc00;
text-decoration: none;
border-bottom: 1px dotted #66cc00;
}
a:hover {
color: #666666;
}
#wrapperOuter {
margin: 0;
padding: 0;
}
header {
margin: 0;
padding: 0;
}
#bannerContainer {
background: url(../img/themeSprite.gif) 0 0px;
height: 148px;
border-bottom: 1px solid #333;
margin: 0;
padding: 0;
}
#banner {
background-image: url(../img/themeSprite.gif);
background-position: 0px -210px;
height: 148px;
margin: 0px auto;
width: 960px;
border-width: 0px 1px;
border-color: #666;
border-style: solid;
background-repeat: repeat-x;
box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5), 12px 0 15px -4px rgba(255, 255, 255, 0.2), -12px 0 8px -4px rgba(255, 255, 255, 0.2), 0px 10px 10px 0px rgba(255, 255, 255, 0.2);
text-align: center;
}
#banner h1 {
margin: 0px;
padding-top: 25px;
}
#banner p {
color; #999;
}
#toolbarContainer {
background-color: #222;
border-bottom: 1px solid #666;
box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5);
margin: 0px;
padding: 0px;
}
nav {
background-image: url(../img/themeSprite.gif);
background-position: 0px -153px;
margin: 0px;
padding: 0px;
width: 960px;
margin: 0px auto;
height: 52px;
border: 1px solid #000;
box-shadow: 12px 0 15px -4px rgba(255, 255, 255, 0.2), -12px 0 8px -4px rgba(255, 255, 255, 0.2), 0px 5px 15px 0px rgba(255, 255, 255, 0.2), 0px -5px 15px 0px rgba(0, 0, 0, 0.2);
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
display: inline;
border-left: 1px solid #333;
border-right: 1px solid #666;
height: 52px;
box-shadow: 15px 0 15px -2px rgba(0, 0, 0, .2);
}
nav ul li a {
display: block;
margin: 0px;
border-bottom: 0;
color: #333;
height: 52px;
padding: 15px 25px;
}
#toolbar {
width: 960px;
margin: 0px auto;
padding: 15px 0;
overflow: auto;
}
#social {
float: left;
}
#social label {
float: left;
display: block;
padding-right: 10px;
}
#social ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#social ul li {
float: left;
display: inline;
margin: 0px 5px;
padding: 0;
}
#social ul li a {
color: #666;
border: 0;
font-size: 18px;
}
#search {
float: right;
}
#search input {
background: #333;
border: 1px solid #666;
box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5);
color: #666;
padding: 10px;
}
Take the drop shadows off of .bannerContainer and .toolbarContainer, then place a div around the outside of both of those and add the drop shadow there. You will have to put the <div id="toolbar"> outside of this div too.
The answer is yes but you'd need to rewrite your code and place the nav menu and center head banner in a wrapping div element then apply the shadow to that element. Right now you have 2 elements which are going to be stacked on one another.
<html>
<head></head>
<style>
.main {
width: 100%;
}
.box1 {
margin: 0 -2px;
width: 50%;
height: 400px;
background: red;
display: inline-block;
}
.box1inner {
margin: auto;
width: 70%;
height: 50px;
background: blue;
-webkit-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
}
.box2 {
margin: 0 -2px;
width: 50%;
height: 400px;
background: orange;
display: inline-block;
}
.box2wrapper {
margin: auto;
width: 70%;
-webkit-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
}
.box2inner {
height: 50px;
background: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">
<div class="box1inner">
</div>
<div class="box1inner">
</div>
</div>
<div class="box2">
<div class="box2wrapper">
<div class="box2inner">
</div>
<div class="box2inner">
</div>
</div>
</div>
<div class="box3">
</div>
</div>
</body>
</html>
Issues I'm having:
When I decided to take the borders off the css the header area gets smaller (which i do not want to happen). - I want to take off the border lines without moving anything around.
When I place an image into the header(it stretches and does not display correctly). Also over the image, I want to place a text is that possible?
Also, if you go onto the menu page, you will see that the thumbnails are not aligned, why is that?
Here is the website: http://younani.com/finalsite/finalindex.html
Here is my css:
#header {
text-align: center;
background: url('bg1.gif');
}
#container {
width: 960px;
margin: 0 auto;
background-color: #FAFAFA;
color: #003300;
font-family: Arial, Helvetica, sans-serif;
background-image: url('backgroundflower5.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#h2 {
text-align: center;
}
#container {
width: 960px;
margin: 0 auto;
}
#container div {
border: 1px solid;
}
#center2 {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px;
width: 494px;
border-radius: 8px;
}
#left,#center,#right {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px;
}
#center {
font-family: Josefin Slab;
background-color: #FFFFFF;
width: 494px;
border-radius: 8px;
text-align: center;
}
.clear {
clear: both;
}
#right {
font-family: Josefin Slab;
font-weight: bold;
border-radius: 8px;
background-color: #FFFFFF;
}
#left a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
display: block;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#2a07ed);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
to(#2a07ed));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #ffffff;
-moz-box-shadow: 0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
-webkit-box-shadow: 0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
box-shadow: 0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
text-shadow: 0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
#left a:link {
background-color: #E6E6E6;
}
#left a:visited {
background-color: #E6E6E6;
}
#left a:hover {
border: 3px inset #333333;
}
#left ul {
list-style-type: none;
margin: 0;
padding-left: 0;
}
#footer {
text-align: center;
font-family: Audimat;
clear: both;
width: 38%;
border-radius: 8px;
background-color: white;
text-align: center;
margin-right: auto;
margin-left: auto;
}
Here is the relevant HTML of my home page:
<div id="container" class="clearfix">
<!-- Header -->
<div id="header">
<h1>Younani Flowers</h1>
</div>
<!-- Left Column -->
<div id="left">
<ul>
<li>Home</li>
<li>Menu</li>
<li>Occasions</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<!-- Center Column -->
<div id="center">
HELLLLLO :D :D
</div>
<!-- Right Column -->
<div id="right">
<p><span style="text-decoration: underline;"><strong>Birth Month Flowers</strong></span></p>
<p>January Carnation</p>
<p>February Iris</p>
<p>March Daffodil</p>
<p>April Daisy</p>
<p>May Lily</p>
<p>June Rose</p>
<p>July Delphinium</p>
<p>August Dahlia</p>
<p>September Aster</p>
<p>October Calendula</p>
<p>November Chrysanthe</p>
<p>December Poinsettia</p>
</div>
<!-- Footer -->
<div id="footer" class="clear">
<div class="nav">
<b>
Home
Menu
Occasions
About Us
Contact Us
</b>
</div>
</div>
</div>
<!-- #container -->
<div id="header" style="float: left; width: 100%;">
<h1>Younani Flowers</h1>
</div>
------or-----
Apply clearfix
<div id="header" class="clearfix">
<h1>Younani Flowers</h1>
</div>
http://www.webtoolkit.info/css-clearfix.html