Related
I have been doing a course online on web-development, the instructor showed us an implementation of slideshow using jquery. I followed every step as instructed, but when I open my browser the images seem to not appear on the slideshow and I don't know if the slideshow box is working.
Here's the link to the jquery tool for the tabs-slideshow:
http://jquerytools.github.io/demos/tabs/slideshow.html
My Questions are:
1.Where have I gone wrong in the code which is preventing the proper working display of the slideshow images and the slideshow box?
2.What is br class="clearing" and .clearing {
clear:both;} (css file 2) doing exactly?
Thank you in advance.
This is my HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Killersites CSS layout Example</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/slideshow.css" rel="stylesheet" type="text/css">
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
[endif]-->
<!-- enable the jquery -->
<script language="javascript">
// What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
$(function() {
$(".slidetabs").tabs(".images > div", {
//enable the "cross-fading" effect
effect:'fade',
fadeOutSpeed: "slow",
// start from the befinning after the last tab
rotate: true
//use the slideshow plugin. It accepts its own configuration
}).slideshow();
});
</script>
</head>
<body>
<content>
<header>
Home
<h1>Killersites Training</h1>
<p>Creating Killersites Since 1998</p>
</header>
<!-- Container for the slides-->
<header class="images">
<!-- First sliding image-->
<div>
<img src="images/killerfrog.jpg" width="940" height="250" alt="image1" title="image1">
</div>
<!-- Second sliding image-->
<div>
<img src="images/killerfrog2.jpg" width="940" height="250" alt="image2" title="image2">
</div>
<!-- Third sliding image-->
<div>
<img src="images/killerfrog3.jpg" width="940" height="250" alt="image3" title="image3">
</div>
</header>
<!-- The tabs -->
<div class="slidetabs">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>News</li>
<li>Products</li>
<li>Services</li>
<li>Clients</li>
<li>Employment</li>
<li>Contact</li>
</ul>
</nav>
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices. Aenean fringilla est interdum metus tempor facilisis ultrices a metus. Sed sit amet tortor sit amet nulla molestie vestibulum. Praesent id sem a libero fermentum volutpat. Maecenas pharetra neque eu leo interdum hendrerit. Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus.</p>
<h3>A Sub Headline</h3>
<p>dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices. </p>
<h3>Another Sub Headline</h3>
<p>dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices.Sed sit amet tortor sit amet nulla molestie vestibulum. Praesent id sem a libero fermentum volutpat. Maecenas pharetra neque eu leo interdum hendrerit. Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus. </p>
<section class="leftfloat">
<h3>nested left section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus.</p>
</section>
<section class="rightfloat">
<h3>nested right section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus.</p>
</section>
<h3>Another Sub Headline</h3>
<p>dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices.Sed sit amet tortor sit amet nulla molestie vestibulum. Praesent id sem a libero fermentum volutpat. Maecenas pharetra neque eu leo interdum hendrerit. Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus. </p>
</article>
<footer>
<section class="first">
<p>©2011 killersites Corp</p>
</section>
<section>
<h3>nested footer section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus.</p>
</section>
<section>
<h3>nested footer section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus.</p>
</section>
<section>
<h3>nested footer section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus.</p>
</section>
<br class="clearing">
</footer>
</content>
</body>
</html>
The css file1:
#charset "UTF-8";
/* slideshow css */
/* container for slides */
.images {
background:#fff url(../images/h300.png) repeat-x;
position:relative;
height:250px;
width:940px;
float:left;
cursor:pointer;
}
/* single slide */
.images div {
display:none;
position:absolute;
top:0;
left:0;
height:250px;
font-size:12px;
}
/* header */
.images h3 {
font-size:22px;
font-weight:normal;
margin:0 0 20px 0;
color:#456;
}
/* tabs (those little circles below slides) */
.slidetabs {
position:absolute;
top:365px;
right:20px;
/*clear:both;
margin-left:330px;*/
}
/* single tab */
.slidetabs a {
width:8px;
height:8px;
float:left;
margin:3px;
background:url(../images/navigator.png) 0 0 no-repeat;
display:block;
font-size:1px;
}
/* mouseover state */
.slidetabs a:hover {
background-position:0 -8px;
}
/* active state (current page state) */
.slidetabs a.current {
background-position:0 -16px;
}
The CSS File 2:
#charset "UTF-8";
*{
margin:0px;
padding:0px;
}
/*html5 display rule */
address, article, aside, canvas, content, details, figcaption, figure, footer, header, hgroup, nav, menu, section, summary {
display:block;
}
#font-face {
font-family: 'ChunkFiveRoman';
src: url('../fonts/chunkfive-webfont.eot');
src: url('../fonts/chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/chunkfive-webfont.woff') format('woff'),
url('../fonts/chunkfive-webfont.ttf') format('truetype'),
url('../fonts/chunkfive-webfont.svg#ChunkFiveRoman') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'sinkin_sans400_regular';
src: url('../fonts/sinkinsans-400regular-webfont.woff2') format('woff2'),
url('../fonts/sinkinsans-400regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-color: #353535;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
background-image: url(../images/dots.png);
}
h1, h2, h3 {
font-family: 'sinkin_sans400_regular','ChunkFiveRoman', Georgia, "Times New Roman", Times, serif;
}
content{
width:940px;
margin-top:20px;
margin-right:auto;
margin-bottom:20px;
margin-left:auto;
position:relative;
background-color:#f2f3ed;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
header {
border-bottom-color: #CCC;
border-bottom-width: 1px;
border-bottom-style: solid;
}
header h1 {
padding:20px 20px 20px 97px;
color:#353535;
font-size:42px;
/* css3 transition */
-webkit-transition:all .5s;
-o-transition-property:all;
-o-transition-duration:.5s;
-moz-transition-property:all;
-moz-transition-duration:.5s;
transition-property:all;
transition-duration:.5s;
}
header h1:hover{
text-shadow: 2px 2px 2px #888;
-webkit-text-shadow:2px 2px 2px #888; /* safari */
}
header p {
color:#353535;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
position: absolute;
right: 0px;
top: 33px;
background-color:#f2f3ed;
padding:10px;
/* rounded corners */
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
/* 2d skew trasnform */
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-moz-transform:skew(-20deg,0deg); /* Firefox */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
-o-transform:skew(-20deg,0deg); /* Opera */
/* css3 transition */
-webkit-transition:all .5s;
-o-transition-property:all;
-o-transition-duration:.5s;
-moz-transition-property:all;
-moz-transition-duration:.5s;
transition-property:all;
transition-duration:.5s;
}
header p:hover {
color:#f2f3ed;
background-color:#353535;
background-image: url(../images/dots.png);
}
#logo {
position: absolute;
top: 12px;
left: 20px;
background: url(../images/logo_small.png) no-repeat;
width: 61px;
height: 62px;
text-indent:-9999px;
/* css3 transition */
-webkit-transition:all 1s;
-o-transition-property:all;
-o-transition-duration:1s;
-moz-transition-property:all;
-moz-transition-duration:1s;
transition-property:all;
transition-duration:1s;
}
#logo:hover {
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
header#anim {
height:250px;
}
nav {
float:left;
width:200px;
}
nav li{
list-style-type:none;
}
nav li a{
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration:none;
display:block;
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
font-size:18px;
/* css3 transition */
-webkit-transition:all .5s;
-o-transition-property:all;
-o-transition-duration:.5s;
-moz-transition-property:all;
-moz-transition-duration:.5s;
transition-property:all;
transition-duration:.5s;
}
nav li a:link{
color:#333;
}
nav li a:visited{
color:#333;
}
nav li a:hover{
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFF;
background-color:#353535;
box-shadow: 0px 0px 5px #888;
-webkit-box-shadow:0px 0px 5px #888; /* safari */
background-image: url(../images/dots.png);
}
nav li a:active{
color:#333;
background-color:#666;
}
article {
width:739px;
float:right;
border-left-color: #CCC;
border-left-width: 1px;
border-left-style: solid;
box-shadow: 0px 0px 5px #888;
-webkit-box-shadow:0px 0px 5px #888; /* safari */
}
article h2, h3, p {
margin-left:20px;
margin-right:20px;
padding-top:10px;
}
article p {
padding-top:4px;
padding-bottom:20px;
line-height:18px;
}
article h2{
color:#353535;
font-size:28px;
text-transform: capitalize;
}
article h3{
color:#353535;
font-size:20px;
text-transform: capitalize;
}
article .leftfloat{
width:50%;
float:left;
}
article .rightfloat{
width:50%;
float:right;
}
footer {
border-top-color: #CCC;
border-top-width: 1px;
border-top-style: solid;
clear:both;
background-color: #407a01;
background-image: url(../images/bg_gradient.png);
border-bottom-right-radius:25px;
border-bottom-left-radius:25px;
-moz-border-bottom-right-radius:25px;
-moz-border-bottom-left-radius:25px;
}
footer section.first {
float:left;
width:200px;
padding-top:10px;
padding-bottom:20px;
}
footer section.first p {
color:#f2f3ed;
}
footer section {
float:left;
width:246px;
padding-top:10px;
padding-bottom:20px;
color:#96C;
}
footer section h3 {
font-family:Georgia, "Times New Roman", Times, serif;
color:#f2f3ed;
font-size:16px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #F2F3ED;
padding-bottom: 0px;
text-transform: capitalize;
font-weight:normal;
}
footer section p {
color:#333;
font-size:10px;
line-height:16px;
}
.clearing {
clear:both;
}
Here is an example of a working slideshow.
I'm getting this from this example at w3schools. There are surely better examples out there than the one at w3schools, but this at least works.
Note the only change I made was to the images, which are now using "https://via.placeholder.com/350x150" as their source.
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://via.placeholder.com/350x150" style="width:100%">
<div class="text">Caption Text #One</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://via.placeholder.com/350x150" style="width:100%">
<div class="text">Caption #Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://via.placeholder.com/350x150" style="width:100%">
<div class="text">Caption #Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
Regarding your question about what the CSS clear attribute does:
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.
via: https://developer.mozilla.org/en-US/docs/Web/CSS/clear
Note the clear:both; example in the above link, and compare it to other clear options, like left, right, and none.
I have a simple webpage for my terms and conditions section that uses CSS.
However, I cannot make the blueBox wider or longer.
I tried to adjust the height and width using CSS but width and length are not changing. Can you help me out?
Here is the index page.
<div id="mainContentArea">
<div id="contentBox">
<div id="title">BlueBliss Inc.</div>
<div id="linkGroup">
<div class="link">Home</div>
<div class="link">About</div>
<div class="link">Portfolio</div>
<div class="link">Contact</div>
</div>
<div id="blueBox">
<div id="header"></div>
<div class="contentTitle">Welcome to BlueBliss Inc.</div>
<div class="pageContent">
<p>This template was created for those needing a really simple site, without much content.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p>
<p>Vestibulum augue quam, interdum id, congue semper, convallis non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla tellus, pulvinar suscipit odio lorem sed pede.</p>
</div>
<div id="footer">web development by bryant smith</div>
</div>
</div>
</div>
CSS
html{
overflow: hidden;
height: 99%;
}
body{
height: 99%;
}
#mainContentArea{
margin: 0 auto 0 auto;
display: table;
height: 100%;
position: relative;
overflow: hidden;
width: 600px;
}
.link,.linkActive{
width:75px;
margin-right:10px;
float: left;
margin-top:24px;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(tab.gif);
position:relative; bottom:0px;
}
#linkGroup{
margin-right:10px;
height:40px;
width:600px;
}
#title{
width:230px;
height:40px;
margin-right:20px;
margin-top:15px;
text-align:center;
float:left;
}
.contentTitle{
margin-left:15px;
margin-right:12px;
margin-bottom:12px;
width:573px;
}
.pageContent{
font-family: Arial, Helvetica, sans-serif;
margin-left:20px;
margin-right:20px;
width:560px;
height:auto;
}
#blueBox{
position: absolute;
vertical-align: middle;
background-color:#E7EDF8;
width:600px;
clear:both;
height:auto;
}
#header{
width:600px;
height:20px;
background-color:#FFFFFF;
background-image:url(header.gif);
background-repeat:no-repeat;
}
#footer{
width:600px;
height:20px;
background-color:#FFFFFF;
background-image:url(footer.gif);
background-repeat:no-repeat;
text-align:center;
padding-right:10px;
}
#contentBox{
margin-top:25px;
}
Also, its limiting me to stay on its size. its not giving me the option to scroll down. please help me. thanks
I see you have this <div id="mainContentArea"> which has
#mainContentArea {
margin: 0 auto 0 auto; display: table;
height: 100%;
position: relative;
overflow: hidden;
width: 661px;
}
the problem is that your #blueBox is inside the #mainContentArea division, which has the property overflow set to hidden. So no matter how much you add to the #blueBox it will be hidden by #mainContentArea
Solution : remove the overflow:hidden line, you dont need it.
I have edited your css so that it can be responsive, it is great to work with reponsive divs. try
#mainContentArea{
width:100%;
}
.link,.linkActive
{
width:75px;
margin-right:10px;
float: left;
margin-top:24px;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(tab.gif);
position:relative; bottom:0px;
}
.link:hover
{
background-image:url(tab2.gif);
}
a
{
text-decoration:none;
}
.link a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
#linkGroup
{
margin-right:10px;
height:40px;
width:100%;
}
#title
{
width:200px;;
height:40px;
margin-right:10px;
margin-top:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
text-align:left;
float:left;
}
.contentTitle
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#213E74;
font-size:19px;
margin-left:15px;
margin-right:12px;
margin-bottom:12px;
width:100%;
text-align:center;
}
.pageContent
{
font-family: Arial, Helvetica, sans-serif;
color:#000000;
font-size:12px;
margin-left:20px;
margin-right:20px;
width:90%;
height:auto;
}
#blueBox
{
position: relative;
vertical-align: middle;
background-color:#E7EDF8;
width:100%;
clear:both;
height:auto;
}
#header
{
width:100%;
height:20px;
background-color:#FFFFFF;
background-image:url(header.gif);
background-repeat:no-repeat;
}
#footer
{
width:100%;
height:20px;
background-color:#FFFFFF;
background-image:url(footer.gif);
background-repeat:no-repeat;
text-align:center;
padding-right:10px;
color:#BDCDEC;
}
#footer a
{
font-size:9px;
color:#BDCDEC;
}
#contentBox
{
margin-top:25px;
}
html, body {
text-align: center;
width:90%;
margin:0 auto;
}
p {text-align: left;}
<head>
<title>Blue Bliss by Bryant Smith</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="bluebliss.css" />
</head>
<body>
<div id="mainContentArea">
<div id="contentBox">
<div id="title">BlueBliss Inc.</div>
<div id="linkGroup">
<div class="link">Home</div>
<div class="link">About</div>
<div class="link">Portfolio</div>
<div class="link">Contact</div>
</div>
<div id="blueBox">
<div id="header"></div>
<div class="contentTitle">Welcome to BlueBliss Inc.</div>
<div class="pageContent">
<p>This template was created for those needing a really simple site, without much content.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p>
<p>Vestibulum augue quam, interdum id, congue semper, convallis non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla tellus, pulvinar suscipit odio lorem sed pede.</p>
</div>
<div id="footer">web development by bryant smith</div>
</div>
</div>
</div>
</body>
</html>
Here you put#mainContentArea width: 600px; you change the width then you will get your specification. because #blueBox is under the #mainContentArea. Then you can adjust the #blueBox height and width.
1) First of all remove the "position: absolute;" from the #blueBox
add "height: 100%" to the following selectors a) #blueBox b) #contentBox.
Find sample Code bellow!!
.pageContent {
font-family: Arial, Helvetica, sans-serif;
color:#000000;
font-size:12px;
margin-left:20px;
margin-right:20px;
width:560px;
height:100%;
}
#bluebox {
position: relative;
vertical-align: middle;
background-color:#E7EDF8;
width:600px;
clear:both;
height:100%;
overflow-y: scroll; /*Allow you to scroll inside the blue content*/
}
The problem is that you have restricted the width of your inner div just keep the width of inner divs to 100% and it will expand. hope it will work
You have defined maximum available width at parent element:
#mainContentArea{
width: 600px;
}
So you have not the option to go further from this 600px in width. If you want to set the width of blueBox to a value more than 600px, you should increase it on #mainContentArea element.
Also it would be far more better to hesitate from defining width property for every single element. So, please remove width declaration from these elements:
#linkGroup
#blueBox
#header
.contentTitle
.pageContent
At the end, you dont need to declare position: absolute for #blueBox, so remove it. Likewise, this part of your CSS
html{
overflow: hidden;
height: 99%;
}
body{
height: 99%;
}
is more likely to be removed, if there is no special need for it to remain, as it could cause problems with your simple structure.
#mainContentArea{
margin: 0 auto 0 auto;
display: table;
height: 100%;
position: relative;
width: 600px;
}
.link,.linkActive{
width:75px;
margin-right:10px;
float: left;
margin-top:24px;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(tab.gif);
position:relative; bottom:0px;
}
.link:hover{
background-image:url(tab2.gif);
}
a{
text-decoration:none;
}
.link a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
#linkGroup{
margin-right:10px;
height:40px;
}
#title
{
width:230px;
height:40px;
margin-right:20px;
margin-top:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
text-align:center;
float:left;
}
.contentTitle
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#213E74;
font-size:19px;
margin-left:15px;
margin-right:12px;
margin-bottom:12px;
}
.pageContent
{
font-family: Arial, Helvetica, sans-serif;
color:#000000;
font-size:12px;
margin-left:20px;
margin-right:20px;
height:auto;
}
#blueBox{
vertical-align: middle;
background-color:#E7EDF8;
}
#header{
height:20px;
background-color:#FFFFFF;
background-image:url(header.gif);
background-repeat:no-repeat;
}
#footer{
height:20px;
background-color:#FFFFFF;
background-image:url(footer.gif);
background-repeat:no-repeat;
text-align:center;
padding-right:10px;
color:#BDCDEC;
}
#footer a{
font-size:9px;
color:#BDCDEC;
}
#contentBox
{
margin-top:25px;
}
<div id="mainContentArea">
<div id="contentBox">
<div id="title">BlueBliss Inc.</div>
<div id="linkGroup">
<div class="link">Home</div>
<div class="link">About</div>
<div class="link">Portfolio</div>
<div class="link">Contact</div>
</div>
<div id="blueBox">
<div id="header"></div>
<div class="contentTitle">Welcome to BlueBliss Inc.</div>
<div class="pageContent">
<p>This template was created for those needing a really simple site, without much content.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p>
<p>Vestibulum augue quam, interdum id, congue semper, convallis non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla tellus, pulvinar suscipit odio lorem sed pede.</p>
</div>
<div id="footer">web development by bryant smith</div>
</div>
</div>
</div>
I've done a few searches and tried a few suggestions, but nothing worked for me.
I have a fixed header menu (horizontal), the logo on the left side and the navigation on the right side. I can't find a way to vertically align both logo and navigation links inside this fixed header.
I've tried position, display and vertical-align, but couldn't get it to work. Additionally, for some weird reason, I'm not able to define a padding-left for my logo DIV, which should be 30x just like the padding-right of my navigation.
Any help would be very appreciated.
Live: http://baskra.com/teste/teste.html
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">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bask.ra</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- COMECO DO NIVO SLIDER -->
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" />
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!-- FIM DO NIVO SLIDER -->
<!-- COMECO DO MENU FIXO -->
<script type="text/javascript">
jQuery("document").ready(function($){
var nav = $('.menu-fundo');
$(window).scroll(function () {
if ($(this).scrollTop() > 0) {
nav.addClass("f-menu");
} else {
nav.removeClass("f-menu");
}
});
});
</script>
<!-- FIM DO MENU FIXO -->
</head>
<body>
<div class="menu-fundo">
<div class="menu">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<div class="logo">
<img src="images/logo.png" />
</div>
<ul id="menutop">
<li>CONTATO</li>
<li>EQUIPE</li>
<li>QUEM SOMOS</li>
<li>COMO FAZEMOS</li>
<li>O QUE FAZEMOS</li>
</ul>
</div>
</div>
<script>
$("#menutop a").click(function(){
var menuid = $(this).attr("href");
$("body, html").animate({scrollTop: $(menuid).offset().top - $('.menu').height() }, "slow");
return false;
});
</script>
<div id="slider" class="nivoSlider theme-default">
<img src="images/slide1.png"/>
<img src="images/slide2.png"/>
<img src="images/slide3.png"/>
</div>
<div class="row">
<div class="o-que-fazemos">
<a id="que"></a>
<h1 class="o-que-fazemos-title">O QUE FAZEMOS?</h1>
<h1 class="o-que-fazemos-subtitle">COMUNICAÇÃO + DESIGN</h1>
<div class="o-que-fazemos-content-1">
<br />
<br />
<b>SUA MARCA VAI ALÉM.</b><br /><br />
<b><i>Consolidar uma marca vai além.</i></b><br /><br />
Além de um simples nome, razão ou definição, consolidar uma marca depende de uma experiência. E é a partir disto que as ideias surgem. Um novo conceito e uma nova definição de negócio.<br />
A <b>BASK.RA</b> nasceu para pensar, criar e gerenciar o posicionamento da sua empresa no mercado.
</div>
<div class="o-que-fazemos-content-2">
<img src="images/oqfazemos.png" />
</div>
</div>
</div>
<div class="row">
<div class="como-fazemos">
<a id="como"></a>
<h1 class="como-fazemos-title">COMO FAZEMOS?</h1>
<div class="como-fazemos-content-1">
<img src="images/comofazemos-content1.png" />
</div>
<div class="como-fazemos-content-2">
<img src="images/comofazemos-content2.png" />
</div>
<div class="como-fazemos-content-3">
<img src="images/comofazemos-content3.png" />
</div>
<div class="como-fazemos-content-4">
<img src="images/comofazemos-content4.png" />
</div>
<div class="como-fazemos-content-5">
<img src="images/comofazemos-content5.png" />
</div>
</div>
</div>
<div class="row">
<div class="quem-somos">
<a id="quem"></a>
<h1 class="quem-somos-title">QUEM SOMOS?</h1>
<h1 class="quem-somos-subtitle">VOCÊ COM CERTEZA JÁ OUVIU FALAR DAS FAMOSAS FÓRMULAS DE BHASKARA.</h1>
<div class="quem-somos-content-1">
<br />
<br />
A equação completa de segundo grau agora pode ter mais sentido do que nunca. Pelo menos foi assim para a gente. Aprendemos a enxergar resultados claros e perfeitamente desenhados em cada problemática que analisávamos, e assim encontramos o X.
<br />
<br />
Dizem por aí que números não se comunicam. Já nós preferimos pensar que eles ajudam na evolução de qualquer negócio e podem se comunicar muito mais do que imaginamos, inclusive nos inspirando criativamente.
</div>
<div class="quem-somos-content-2">
<img src="images/quemsomos1.png" />
</div>
<br />
<br />
<br />
<br />
<br />
<hr>
<div class="quem-somos-content-3">
<img src="images/quemsomos3.png" />
</div>
<div class="quem-somos-content-4">
<br />
<br />
<img src="images/quemsomos2.png" />
</div>
</div>
</div>
<div class="row">
<div class="a-equipe">
<a id="equipe"></a>
EQUIPE<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis.
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>
</div>
<div class="row">
<div class="o-contato">
<a id="contato"></a>
CONTATO<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis.
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
html,body {
height:auto;
margin:0;
padding:0;
border:0;
}
div {
margin:0;
border:0;
}
.login {
display: table-cell;
}
logo {
border:0;
z-index:9999;
float:left;
padding-left:30px;
}
hr {
display: block;
position: relative;
padding: 0;
margin: 20px auto;
height: 0;
width: 50%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 2px solid #FFF;
border-bottom: 1px solid #FFF;
}
.menu-fundo {
background: #fff repeat-x 0 0;
left: 0;
top: 0;
z-index: 9999;
position:fixed;
}
.f-menu {
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
} /* isso vai fazer o menu ficar fixo no topo */
.menu {
height: 100px;
left: 0;
top: 0;
z-index: 9999;
background: #fff repeat-x 0 0;
position:fixed;
width:100%;
}
.menu ul {
list-style: none;
font-family: 'Source Sans Pro', sans-serif;
font-size:17px;
font-weight:bold;
position: fixed;
top: 0;
right: 0;
width: 100%;
}
.menu ul li {
float: right;
padding-right:30px;
padding-top:0px;
}
.menu ul li:first-child {
padding-left: 0;
}
.menu ul li a {
display: table-cell;
vertical-align: middle;
color:#000;
text-decoration:none;
border-top:3px solid #999;
}
.menu ul li a:hover {
color: #6D6D6D;
border-top:3px solid #EA0000;
}
.row, .o-que-fazemos, .como-fazemos, .quem-somos, .a-equipe, .o-contato {
display: block;
float: left;
position: relative;
overflow: hidden;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.o-que-fazemos {
background-image: url('images/oqfazemosFUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
float:left;
overflow: hidden;
}
.o-que-fazemos-title {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#ffc709;
font-weight:900;
letter-spacing: 2px;
}
.o-que-fazemos-subtitle {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#FFF;
font-weight:900;
letter-spacing: 2px;
}
.o-que-fazemos-content-1 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
float:left;
margin-left:10%;
width: 30%;
}
.o-que-fazemos-content-2 {
margin-right:10%;
width: 50%;
float: left;
text-align: right;
}
.como-fazemos {
background-image: url('images/comofazemosFUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
float:left;
overflow: hidden;
}
.como-fazemos-title {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#FFF;
font-weight:900;
letter-spacing: 2px;
}
.como-fazemos-content-1 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
float:left;
width: 20%;
text-align:center;
}
.como-fazemos-content-2 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
margin-left:10%;
float: left;
text-align:center;
}
.como-fazemos-content-3 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
margin-left:3%;
width: 20%;
float: left;
text-align:center;
}
.como-fazemos-content-4 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
margin-left:10%;
color:#FFF;
float: left;
text-align:center;
}
.como-fazemos-content-5 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
width: 20%;
float: left;
text-align:center;
}
.quem-somos {
background-image: url('images/quemsomosFUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
float:left;
overflow: hidden;
}
.quem-somos-content-1 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#414042;
float:left;
margin-left:10%;
width: 40%;
text-align: left;
}
.quem-somos-content-2 {
width: 43%;
float: left;
text-align: right;
}
.quem-somos-content-3 {
float:left;
width: 50%;
text-align: center;
}
.quem-somos-content-4 {
width: 40%;
float: left;
text-align: center;
}
.quem-somos-title {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#fff;
font-weight:900;
letter-spacing: 2px;
}
.quem-somos-subtitle {
font-family: 'Source Sans Pro', sans-serif;
font-size:22px;
text-align:center;
color:#414042;
font-weight:900;
letter-spacing: 2px;
}
.a-equipe {
background-image: url('images/EQUIPE-FUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
}
.o-contato {
background-image: url('images/contato-FUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
}
.banner {
position: relative;
overflow: auto;
}
.banner li {
list-style: none;
}
.banner ul li {
float: left;
}
Your first problem is already solved Now here is the solution for your second problem which is you can't give padding to logo.
the problem was in HTML you write the class logo but in CSS there is no property given to class logo. infect in your CSS file class logo not exist.
aah just checked your css uploaded here. you are missing . in your
class logo.
div.logo {
margin: 0;
padding-left: 30px;
}
You can use the padding property on the UL to get in vertically centered.
ul#menu-top {
padding: 20px 0;
// Remove your width:100% property
}
padding-left is working fine when I tested it. Try making above change and try again. Hope this will fix your issue.
Here is a screenshot from my computer. Increase the padding a little bit more to get it more centered.
This is now the complete html/CSS because someone aked for it.
This is an updated version but it still does not work! I run this on a localhost (usbwebserver).
I am trying to use a background-image for a div but it will not show the image.The image is in the Images file.
html:
<!DOCTYPE html>
<html>
<head>
<title>Computing</title>
<link rel="stylesheet" type="text/css" href="css/CSS.css">
<link rel="shortcut icon" href="Images/laptop.ico" />
</head>
<header class="Header">
<div class="logo" onClick="location.href='Home.html'"> </div>
<h1>Computing</h1>
</header>
<body>
<div class="opvulling1"></div>
<div class="buttonA">Home</div>
<div class="button" onClick="location.href='Laptops.php'">Laptops</div>
<div class="button" onClick="location.href='Cameras.php'">Camera's</div>
<div class="button" onClick="location.href='gsms.php'">GSM's</div>
<div class="button" onClick="location.href='Contact.html'">Contact</div>
<div class="button" onClick="location.href='Winkelwagen.php'">Winkelwagen</div>
<div class="opvulling2"></div>
<div class="Central">
<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacus augue, aliquam ut gravida eget, adipiscing in elit. Suspendisse potenti. Integer laoreet, risus nec fermentum imperdiet, leo magna interdum eros, eu aliquam turpis risus eget nulla. Vivamus ultrices urna vitae nisl vestibulum cursus. Suspendisse sed gravida libero. Fusce blandit dui id porttitor sodales. Morbi vitae sapien quis nulla gravida dignissim. Donec pharetra ipsum tellus, sed laoreet dui viverra in. Nullam blandit diam ac quam consectetur consectetur. Nulla facilisi. Nam ut quam diam. Nunc nec nisl ut tortor luctus commodo. Fusce nec velit neque. Vivamus ac dui tempor, malesuada lacus sed, sollicitudin odio. Nullam ac adipiscing velit, sed dapibus mauris. Sed et egestas dolor.</section>
<section>Phasellus non interdum nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sed convallis nisi. In in tellus eleifend, tincidunt metus et, auctor mauris. Nullam risus libero, condimentum in adipiscing elementum, tincidunt ut elit. Sed eu diam sed erat aliquam convallis in a mauris. Cras at enim condimentum dolor consequat consequat. Nulla mattis leo in justo molestie, nec tincidunt nulla consequat. Duis accumsan congue lacus sit amet vehicula. Duis vitae pretium urna. Donec sodales, risus id auctor tempor, nisi nisi vehicula dui, in aliquam ante arcu sit amet dui. Curabitur fringilla cursus erat, id lobortis neque aliquet a. Etiam et pharetra diam.</section>
</div>
css:
body{
background-color:#CAEAED;
}
.logo{
background-image:url('Images/Computing.jpg');
height:100px;
width:200px;
}
.Central{
background-color: #FFFFFF;
width: 50%;
margin-top: 50px;
margin-left:20%;
height: auto;
padding: 1%;
font-family:Arial;
font-size: 16px;
}
.Header{
background-color: #CAEAED;
margin-top:-10px;
margin-left:-10px;
width: 101%;
position:relative;
height: 5%;
padding-top:1px;
padding-right: 1%;
text-align:center;
}
h1{
font-size:30px;
font-family:Arial;
text-align: center;
}
section{
padding: 1%;
}
.button{
background-color:#009999;
font-family:Arial;
font-size: 16px;
position:relative;
float:left;
margin-top: 2px;
margin-right:2px;
height:20px;
padding:5px;
}
.buttonA{
font-family:Arial;
font-size: 16px;
background-color:#015965;
transition: width 2s;
margin-top: 2px;
position:relative;
float:left;
margin-right:2px;
height:20px;
padding:5px;
}
.opvulling1{
background-color:#009999;
float:left;
margin-left:-10px;
margin-top: 2px;
margin-right:2px;
height:20px;
padding:5px;
width:20%;
}
.opvulling2{
background-color:#009999;
float:left;
margin-top: 2px;
margin-right:-2000px;
height:20px;
padding:5px;
width:1200px;
}
.button:hover{
cursor:pointer;
background-color:#1F6B75;
font-family:Arial;
font-size: 16px;
}
img{
height: 250px;
width: 300px;
}
h3{
font-family:Arial;
}
form{
float: left;
margin-left: 20px
}
td{
width:40%;
text-align:center;
}
.Prijs{
float:left;
}
.article{
position:relative;
float:left;
margin-right:20px;
background-color:white;
}
h2{
font-family:Arial;
}
How can I make the image work? I already searched it on the internet but i can't find it anywhere. Someone please help.
change \ with /
.logo{
background-image:url('Images/Computing.jpg');
}
If you don't see the image try to put the dimension of the image for example if is 200*300 try this:
.logo{
width:200px;
height:300px;
background-image:url('Images/Computing.jpg');
}
You're using a backslash instead of a regular slash.
background-image:url('Images\Computing.jpg');}
^
^
background-image:url('Images/Computing.jpg');}
This is supposed to work if the image is indeed in the specified location.
If you have your site on Linux, you should be aware that on the server site, file names are case sensitive (Computing.jpg not equal computing.jpg). Pay attention the file name is same as the css reference.
Good luck!
Use:
background-image:url('../Images/Computing.jpg');
Your CSS is called in a relative way this requires you to specify your path relative to your CSS file.
you should use background-image style as
.logo {
background-image:url('Images/computing.jpg');}
I agree with everyone above about the slash, and that you need a width and height for the BG image but i see something else that might be causing the issue. Assuming that you are doing this on a web server and not locally. If this is a Linux environment then everything needs to be case sensitive. I have found that it is bad practice to use Images/ i would change to images/
Write some text inside your logo div just to ensure that is not problem with the with and height of the div.
I have some description text which is part of a paragraph but the wrapper box doesnt adjust in size to accomodate the text. I have tried height:auto; but it doesnt seem to do much.
If possible please show me an example with and without scrollbars. My main problem is that i cannot get the grey box to expand. If i were to have scroll bars i would want them on the p.desc.
Here is my jsfiddle:http://jsfiddle.net/XxDFb/29/
HTML
<div class="team-wrapper">
<div class="team-member-photo">
<img alt="pic" src="http://placehold.it/134x108">
</div>
<div class="team-member-social-network-links"> <a class="url" href="http://www.repeatpenguin.com" title="repeatpenguin.com" rel="me">Twitter</a> / <a class="url" href="http://www.repeatpenguin.com" title="repeatpenguin.com" rel="me">Facebook</a>
</div>
<div class="team-details">
<p class="name">Firstname Surname</p>
<p class="job-title">Job title</p>
<p class="email">Email Address</p>
<p class="tel">112-123-1232</p>
<p class="desc"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis elementum neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non facilisis magna. Vestibulum mattis vitae lacus vitae hendrerit. Maecenas vel urna et quam egestas bibendum. Mauris aliquet tellus ante, sit amet malesuada urna tincidunt id. In dapibus erat vel metus aliquet rhoncus.</p><br />
<p>
Integer pharetra nunc id dapibus posuere. Aliquam auctor, felis id euismod dignissim, nulla diam condimentum dui, sit amet aliquam quam elit vel nisi. Ut erat ligula, eleifend vel facilisis vel, viverra ut dui. Suspendisse lacinia massa sed porttitor lacinia. Nunc vitae eros convallis dui dapibus aliquet. Donec cursus est eu dolor pulvinar eleifend. Nunc at sem et lorem tempus tincidunt eu ac nunc. Praesent scelerisque libero vel pharetra porttitor.</p>
</p>
</div>
</div>
CSS
div.team-wrapper {
background-color:#dedede;
padding:10px;
position:relative;
height:auto;
}
div.team-member-photo {
width:135px;
height:109px;
padding-top:20px;
padding-left:20px;
}
div.team-member-photo img {
background: none repeat scroll 0 0 #F1F1EF;
border: 1px solid #B2B4B2;
padding: 8px;
}
div.team-member-social-network-links {
width:135px;
height:109px;
padding-left:30px;
padding-top:20px;
}
div.team-details {
top: 7px;
left: 200px;
position: absolute;
border:1px solid RED;
width:560px;
margin-top:20px;
height:auto;
}
div.team-details p {
margin:0;
line-height:25px;
}
div.team-details p.name {
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
color: #4F688E;
font-weight:700;
font-size:18px;
text-transform:uppercase;
}
div.team-details p.job-title {
color: #626362;
font-weight:400;
font-size:18px;
font:italic 16px/18px Georgia, Palatino, "Times New Roman", Times, serif;
}
div.team-details p.email {
text-shadow:0 1px 1px rgba(255, 255, 255, 0.8);
color: #626362;
}
div.team-details p.tel {
color: black;
font-weight:400;
font-size:18px;
font:16px/18px Georgia, Palatino, "Times New Roman", Times, serif;
}
div.team-details p.desc {
padding-top:40px;
}
It does look like a position: absolute problem to me. Because .team-details is absolute, the parent doesn't have control over it anymore. I put this Fiddle together.
I changed .team-member-photo to .team-member-photo-social and moved the social links to live there. Next, I removed position: absolute and the styles that were attached to it.
From here the two divs can either be display: inline-block to allow for them to sit next to each and still have some margin, or float: left. Floated elements in the parent will cause a height issue, but I've added a class .cf (clearfix) to extend the height of the parent to end of the children.
I went with the float because some browsers (IE7 and below) won't read inline-block