Yet another centering div alignment issue - css
I'm new to using CSS and have experience with old HTML, last time I designed a site was in 2002.
So i've been designing a new personal website for the past few days without a problem until i tried viewing my site in Internet Explorer (8 & 9).
After 2 whole days of searching for answers i've decided to ask for help. The site was looking as intended in Firefox and Chrome and i've just been tearing my hair out over it. The only thing i know for certain is adding the !doctype breaks it in both ie9 and ff.
I would love to have someone more experienced take a look at my code.
Hope to read a response soon.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=9" >
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<!-- Nivo Slider Theme loading -->
<link rel="stylesheet" href="themes/sarrus/sarrus.css" type="text/css" media="screen"/>
<TITLE>Sarrus Design Works</TITLE>
<!-- Layout CSS Link -->
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</HEAD>
<BODY>
<div id="wrapper">
<div id="header" class="gradient">
<img style="border:solid 2px #202020;" src="img/sdw-logo.jpg">
</div>
<!-- Nivo Slider Body attachment -->
<div id="content">
<div class="slider-wrapper theme-sarrus">
<!-- Add div class="ribbon" if theme contains ribbon -->
<div id="slider" class="nivoSlider">
<img src="img/slider1.jpg" alt=""/>
<img src="img/slider2.jpg" alt=""title="#htmlcaption" />
<img src="img/slider3.jpg" alt=""title="This is an example of a caption" />
<img src="img/slider4.jpg" alt=""/>
</div>
</div>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with a link.
</div>
<div id="content2">
</div>
<div id="details">
All artwork is copyright of Mike Williams. Fanart original characters are copyright belonging to their respective owner.
</div>
</div>
</BODY>
<!-- place scripts here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed:1000, // Slide transition speed
pauseTime:6000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, // Next & Prev navigation
directionNavHide:true, // Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, // Use left & right arrows
pauseOnHover:false, // Stop animation while hovering
manualAdvance:false, // Force manual transitions
captionOpacity:0.7, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next' // Next directionNav text
});
});
</script>
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
</HTML>
and CSS
html {
height: 100%;
font-family:arial;
}
body {
text-align: center;
marginleft: ;
background-repeat: no-repeat;
padding:0;
background: #ffffff;
background: -moz-linear-gradient(top, rgba(136,110,191,0.76) 2%, rgba(136,110,191,0) 54%, rgba(136,110,191,0) 67%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(136,110,191,0.76)), color-stop(54%,rgba(136,110,191,0)), color-stop(67%,rgba(136,110,191,0)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(136,110,191,0.76) 2%,rgba(136,110,191,0) 54%,rgba(136,110,191,0) 67%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(136,110,191,0.76) 2%,rgba(136,110,191,0) 54%,rgba(136,110,191,0) 67%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(136,110,191,0.76) 2%,rgba(136,110,191,0) 54%,rgba(136,110,191,0) 67%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(136,110,191,0.76) 2%,rgba(136,110,191,0) 54%,rgba(136,110,191,0) 67%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2886ebf', endColorstr='#00000000',GradientType=0 );
}
* {margin:0; padding:0;}
/* ----- Nivo Slider Settings ---- */
.nivoSlider {
background:url(img/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position:absolute;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
text-align:left;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
}
.nivo-controlNav a.active {
font-weight:bold;
}
#Wrapper {
text-align:left;
width: 850px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#header {
position:relative;
z-index:50;
width:120px;
height:170px;
margin-left:30px;
border:solid 1px #404040;
-webkit-box-shadow: 3px 3px 4px 0px #404040;
-moz-box-shadow: 3px 3px 4px 0px #404040;
box-shadow: 3px 3px 4px 0px #404040;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: rgb(125,126,125);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
}
#slider {
margin: 0 auto;
width:846;
height:433;
}
#content {
border:1px solid #b4b4b4;
padding:5px;
z-index:1;
width:100%;
margin-top:-85px;
background-color:#e9e9e9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 3px 3px 4px 0px #404040;
-moz-box-shadow: 3px 3px 4px 0px #404040;
box-shadow: 3px 3px 4px 0px #404040;
}
#content2 {
border:1px solid #b4b4b4;
padding:5px;
z-index:1;
width:100%;
height:200px;
background-color:#E9E9E9;
margin-top:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 3px 3px 4px 0px #404040;
-moz-box-shadow: 3px 3px 4px 0px #404040;
box-shadow: 3px 3px 4px 0px #404040;
}
#details {
padding:6px;
width:100%;
text-align:center;
font-color:#b4b4b4;
font-filter:soft;
font-size:8px;
}
Sorry about the big post ^^ not sure what information you would need.
it looks like the .nivo-caption is getting its width based on body, because none of its parents have position: relative.
Are you able to set position: relative to the .nivo-slider element?
Related
Position relative to screen size
before I start to explain my problem, I just wan't to say that even if this subject already exist I haven't found any solution working, it has been 1 week that this problem is now blocking, I really need help. So the problem is that I started to create a website and I tried it on different screen resolution, but it only work on mine, on different the elements are going crazy and do strange things, each go on the other etc...
Here's my code :
#font-face {
font-family: Comfortaa;
src: url(Comfortaa-Regular.ttf);
}
#font-face
{
font-family: Comfort;
src: url(ChampEtLimou.ttf);
}
body
{
background-color : rgb(255,255,255);
}
.titre3
{
color : #0183c0;
font-family : Comfortaa;
position: fixed;
font-size :50px;
z-index:10;
left : 43.2%;
top:-6%;
}
.titre1
{
color : #6597ed;
font-family : Comfortaa;
position: fixed;
left : 43.2%;
top:3%;
font-size : 30px;
z-index:10;
}
.bacc
{
font-family : Comfortaa;
position : fixed;
left : 45%;
top : 12%;
color:#ffffff;
-moz-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
-webkit-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
box-shadow:inset 0px 1px 0px 0px #7a8eb9;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #196499), color-stop(1, #1a6ba1));
background:-moz-linear-gradient(top, #196499 5%, #1a6ba1 100%);
background:-webkit-linear-gradient(top, #196499 5%, #1a6ba1 100%);
background:-o-linear-gradient(top, #196499 5%, #1a6ba1 100%);
background:-ms-linear-gradient(top, #196499 5%, #1a6ba1 100%);
background:linear-gradient(to bottom, #196499 5%, #1a6ba1 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#196499', endColorstr='#1a6ba1',GradientType=0);
background-color:#196499;
border:1px solid #314179;
display:inline-block;
cursor:pointer;
font-size:10px;
font-weight:bold;
padding:11px 23px;
z-index:10;
}
.bacc:hover
{
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1a6ba1), color-stop(1, #196499));
background:-moz-linear-gradient(top, #1a6ba1 5%, #196499 100%);
background:-webkit-linear-gradient(top, #1a6ba1 5%, #196499 100%);
background:-o-linear-gradient(top, #1a6ba1 5%, #196499 100%);
background:-ms-linear-gradient(top, #1a6ba1 5%, #196499 100%);
background:linear-gradient(to bottom, #1a6ba1 5%, #196499 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a6ba1', endColorstr='#196499',GradientType=0);
background-color:#1a6ba1;
}
.bacc:active
{
}
.ball
{
position: fixed;
width : 2.7%;
height:5%;
left:40%;
top:2%;
z-index:10;
}
.immenu
{
position:relative;
top:15em;
left:3em;
width:30%;
height:30%;
z-index:2;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.1);
box-shadow: inset rgba(0,0,0,0.35) 3px 3px 13px;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
transition: all 0.7s;
}
.safalogo
{
position:fixed;
top:5%;
left:5%;
width:6%;
height:5%;
z-index:10;
}
.sanologo
{
position:fixed;
top:5%;
left:12%;
width:6%;
height:8%;
z-index:10;
}
.banner
{
position:relative;
top:-7em;
left:-5em;
width:100em;
height:25em;
z-index:0;
}
.voile
{
position:relative;
top:-32.2em;
left:-1em;
width:100em;
height:25em;
z-index:1;
opacity:0.5;
}
.speechtitre
{
color : white;
font-family : Comfort;
position: relative;
margin-left:0;
margin-top:0;
left : -1.7em;
top:-30em;
font-size : 30px;
z-index:1;
font-weight:bold;
}
.speechtex
{
color : white;
font-family : Comfort;
position: relative;
left : 29em;
top:-45em;
font-size : 20px;
z-index:1;
}
.ligne
{
position:fixed;
width:100%;
height:0.2%;
top:20%;
left:0%;
z-index:10;
}
.faceblogo
{
position:fixed;
width:3.8%;
height:6%;
left:90%;
top:6%;
z-index:10;
}
.bfixe
{
position:fixed;
width:100%;
height:20%;
top:0%;
left:0%;
z-index:9;
opacity:0.75;
}
body
{
overflow-x: hidden;
padding:auto;
border:auto;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kibera Black Stars</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="Style.css">
<style type="text/css">a:link{text-decoration:none}</style>
</head>
<body>
<p class="titre3">Kibera</p>
<P class="titre1">BlackStars</P>
<img src="images/ball.png" alt="ballon" class="ball">
Accueil
<img src="images/safalogo.png" alt="safalogo" class="safalogo">
<img src="images/sanologo.png" alt="sanologo" class="sanologo">
<img src="images/ligne.jpg" alt="ligne" class="ligne">
<img src="images/bannierfixe.jpg" alt="bannierfixe" class="bfixe">
<p><img src="images/faceblogo.png" alt="faceblogo" class="faceblogo"></p>
<img src="images/immenu.jpg" alt="immenu" class="immenu">
<img src="images/banner.jpg" alt="banner" class="banner">
<img src="images/voile.jpg" alt="voile" class="voile">
<p align="center" class="speechtitre">Faut mettre un titre la !</p>
<p class="speechtex">Faut mettre un texte ici !</p>
</div>
</body>
</html>
Thanks for help !
You use fixed positions. This couse your problem. You should use media queries for different screen sizes. I suggest you to use bootstrap or something similar has a grid system. Bootstrap has grid system for xs, xm, md, xl etc. screen sizes. You can hide some elements for smaller screens, too. For example, we want four divs side by side for large screens. On medium screens, we want to show three of them side by side. <div class='container'> <div class='row'> <div class='col-xl-3 col-md-4 col-sm-6'> <img src="https://via.placeholder.com/350x150"> </div> <div class='col-xl-3 col-md-4 col-sm-6'> <img src="https://via.placeholder.com/350x150"> </div> <div class='col-xl-3 col-md-4 col-sm-6'> <img src="https://via.placeholder.com/350x150"> </div> <div class='col-xl-3 col-md-4 col-sm-6'> <img src="https://via.placeholder.com/350x150"> </div> <div class='col-xl-3 col-md-4 col-sm-6'> <img src="https://via.placeholder.com/350x150"> </div> <div class='col-xl-3 col-md-4 col-sm-6'> <img src="https://via.placeholder.com/350x150"> </div> </div> </div> JSFiddle demo: For more info visit: https://getbootstrap.com/docs/4.1/layout/overview/ Sorry for my bad English.
Just recreated the layout of with some basic place holders. Maybe you can use the base structure and extend/build on top of this.
Preview at JS Fiddle : https://jsfiddle.net/b4vez5qx/
NOTE : This is not responsive and its just elastic layout.
HTML
<header>
<div class="logo">logo</div>
site title
<div class="facebook">FaceBook</div>
</header>
<div class="main">
<div>
<div class="imgCont"><img src="via.placeholder.com/250x200/"> </div>
<div class="headText">
<h3>Heading</h3>
<div>
Dummy text Dummy text Dummy text Dummy text Dummy text
</div>
</div>
</div>
</div>
CSS
*{margin:0; padding:0; font-family:arial}
header{border-bottom:1px solid blue; text-align:center; height:50px; background:#f4f4f4; padding:25px 10px 0 20px;}
header div{display:inline-block;}
.logo{float:left}
.facebook{float:right}
.sitetitle{}
.main{background:#0e1436; height:250px;}
.imgCont{padding:10px;float:left}
.imgCont img{border:8px solid #1b344b}
.headText{padding:10px; color:#fff;}
Hope this helps
Unwanted white space in header
Preview:
How can I remove this white space from the header? I didn't play with the paddings of the header.
I have a section for Header and Footer. Also, I have a section for the whole thing including Header, Body, Footer. What is causing this white space in the header and how can I remove it?
my CSS code:
*{
font-family: sans-serif;
}
h2.header_headings{
font-size: 45px;
text-indent: 10px;
line-height: 1px;
}
h3.header_headings{
font-size: 20px;
text-indent: 25px;
line-height: 1px;
}
h1.body_headings{
font-size: 27px;
}
h1.body_headings:first-letter{
font-size: 200%;
}
img{
float: left;
}
p{
font-family: tahoma;
}
ul
{
font-weight: bold;
font-size: 18px;
}
a
{
color: orange;
}
a:hover
{
color: green;
}
li
{
margin: 5px;
}
footer{
font-size: 15px;
text-align: center;
}
#copyright{
vertical-align: middle;
}
#body{
width: 800px;
background-color: white;
border-width: thick;
border-color: black;
border-style: solid;
margin: auto;
box-shadow: 0 0 30px #000000;
}
body{
background-image: url("../images/bats.gif");
background-repeat: repeat;
}
#header{
border-bottom: 2px solid black;
background: orange; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(45deg, white, orange 75%, black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, white, orange 75%, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, white, orange 75%, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, white, orange 75%, black); /* Standard syntax */
}
#footer{
height: 50px;
border-top: 2px solid black;
background: orange; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(45deg, black, orange, white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, black, orange, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, black , orange, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, black, orange, white); /* Standard syntax */
}
My HTML5:
<!DOCTYPE html>
<html lang="en">
<section id="body">
<section id="header">
<head>
<title>Halloween Store</title>
<meta charset = "UTF-8">
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="stylesheet" type="text/css" href="styles/normalize.css"/>
<img src="images/pumpkin.gif" alt="Pumpkin Picture">
<h2 class="header_headings">The Halloween Store</h2>
<h3 class="header_headings">For the little Goblin in all of us!</h3>
</head>
</section>
<body>
<h1 class="body_headings">Welcome to my site. Please come in and stay awhile.</h1>
<p>I started this web site because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.</p>
<p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.</p>
<h2 class="body_headings">Product categories</h2>
<ul>
<li>Props</li>
<li>Costumes</li>
<li>Special Effects</li>
<li>Masks</li>
</ul>
<h2 class="body_headings">My guarantee</h2>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <b>No questions asked!</b></p>
</body>
<section id="footer">
<footer>
<p id="copyright">© 2016 Ben Murach</p>
</footer>
</section>
</section>
</html>
That was because of the <h2>, which had a margin-top of 20px. The following should work!
* {
font-family: sans-serif;
}
h2.header_headings {
font-size: 45px;
text-indent: 10px;
margin-top: 0;
}
h3.header_headings {
font-size: 20px;
text-indent: 25px;
}
h1.body_headings {
font-size: 27px;
}
h1.body_headings:first-letter {
font-size: 200%;
}
img {
float: left;
}
p {
font-family: tahoma;
}
ul {
font-weight: bold;
font-size: 18px;
}
a {
color: orange;
}
a:hover {
color: green;
}
li {
margin: 5px;
}
footer {
font-size: 15px;
text-align: center;
}
#copyright {
vertical-align: middle;
}
#body {
width: 800px;
background-color: white;
border-width: thick;
border-color: black;
border-style: solid;
margin: auto;
box-shadow: 0 0 30px #000000;
}
body {
background-image: url("../images/bats.gif");
background-repeat: repeat;
}
#header {
border-bottom: 2px solid black;
background: orange;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(45deg, white, orange 75%, black);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, white, orange 75%, black);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, white, orange 75%, black);
/* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, white, orange 75%, black);
/* Standard syntax */
}
#footer {
height: 50px;
border-top: 2px solid black;
background: orange;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(45deg, black, orange, white);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, black, orange, white);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, black, orange, white);
/* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, black, orange, white);
/* Standard syntax */
}
<!DOCTYPE html>
<html lang="en">
<section id="body">
<section id="header">
<head>
<title>Halloween Store</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles/main.css" />
<link rel="stylesheet" type="text/css" href="styles/normalize.css" />
<img src="images/pumpkin.gif" alt="Pumpkin Picture">
<h2 class="header_headings">The Halloween Store</h2>
<h3 class="header_headings">For the little Goblin in all of us!</h3>
</head>
</section>
<body>
<h1 class="body_headings">Welcome to my site. Please come in and stay awhile.</h1>
<p>I started this web site because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.</p>
<p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.</p>
<h2 class="body_headings">Product categories</h2>
<ul>
<li>Props
</li>
<li>Costumes
</li>
<li>Special Effects
</li>
<li>Masks
</li>
</ul>
<h2 class="body_headings">My guarantee</h2>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <b>No questions asked!</b>
</p>
</body>
<section id="footer">
<footer>
<p id="copyright">© 2016 Ben Murach</p>
</footer>
</section>
</section>
</html>
CSS seperator using image or plain css?
The separator image isn't displaying on the right side of the input field. I tried using a plain border and with different positioning, as well as with an image as in my example, but it doesn't show.
PS. This is the seperator image:
jsfiddle
.ui-topbanner {
color:#000;
height: 31px;
background-color: #f2e9da;
border-bottom: 1px solid #d9cebc;
}
.ui-topbanner-title {
position:absolute;
top:5px;
left:4px;
height:26px;
line-height:26px;
padding:0 10px 0 25px;
display:inline-block;
color:#000;
border:1px solid #d9cebc;
border-bottom:none;
background-color:#fff;
font-size:.7rem;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-image: url(http://hardist.eu/public/img/icon_folderyellow3.gif);
background-position: 5px 5px;
background-repeat: no-repeat;
}
.ui-topsubbanner {
position:relative;
color:#000;
height: 30px;
background: -webkit-linear-gradient(top, #f7f1e8 0%, #f4ecdf 100%);
border-top: 1px solid #fff;
border-bottom: 1px solid #efe8da;
}
.ui-topsubbanner-wrapper {
padding:2px 3px 0 5px;
}
.ui-seperator {
width:2px;
height:17px;
display:inline-block;
background-image: url(../images/ui-seperator.png);
background-position: 0 6px;
background-repeat: no-repeat;
}
<div class="ui-topbanner"><div class="ui-topbanner-title">Test</div></div>
<div class="ui-topsubbanner">
<div class="ui-topsubbanner-wrapper">
<input type="text" class="input-search" placeholder="Search...">
</div>
<div class="ui-seperator"></div>
</div>
Check setting float property. It may help you.
.ui-topsubbanner-wrapper {
padding:2px 3px 0 5px;
float: left;
}
.ui-seperator {
width:2px;
height:17px;
display:inline-block;
background-image: url(http://i.imgur.com/ovVm6fW.png);
background-position: 0 6px;
background-repeat: no-repeat;
float: left;
}
The image is actually there, but it's hard to see because it's so similar in color to background and not where you expect. Because the topsubbanner-wrapper div is a block element by default, the separator was getting bumped to the beginning of the next line. I couldn't see it at all until I changed the background of the separator div to red for diagnostic purposes. You can fix the problem by setting the display of the topsubbanner-wrapper div to inline-block, as you did with the separator, or by setting its float to left.
Vertical line in thumb of range input
I am trying to create a line inside the thumb of a <input> with type range.
I have managed to modify some of the styling of the thumb using the ::-webkit-slider-thumb pseduo-element selector, as shown below, but I need a vertical line centered in the thumb of the slider. Is there a way to create such a line?
input[type="range"]{
-webkit-appearance:none !important;
width: 344px;
height: 18px;
/*background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 75%,#f6f6f6 75%,#f6f6f6 100%);*/
/*-webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0, 0.2));*/
border-radius: 18px;
margin: auto;
transition: all 0.3s ease;
background: rgb(190,220,0);
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none !important;
/*background-color: blue;*/
border: 1px solid #c0c0c0;
width: 34px;
height: 34px;
border-radius: 18px;
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(235,235,235,1) 100%, );
-webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0, 0.2));
z-index: 1;
/*background: white url(../icons/gc4_icon_cssbutton-v.svg) no-repeat;*/
}
<input type="range" id="test" />
In some old versions of Chrome only (but not in most browsers), you can do this using ::after or ::before pseudo-elements:
input[type="range"]::-webkit-slider-thumb{
position:relative;
display:block;
}
input[type="range"]::-webkit-slider-thumb::after{
content:'';
position:absolute;
top:0;
height:100%;
left:50%;
width:1px;
background:#000;
}
DEMO
However, from Chrome 49 onwards, this no longer works; allowing pseudo-elements to be chained in a CSS selector (like foo::-webkit-slider-thumb::after) was a violation of the CSS spec, and Chrome has changed its behaviour to conform to the spec. This also never worked in Firefox, Internet Explorer, or Edge.
Kerning on font between chrome and firefox
I am working on a menu with a custom font and in chrome (and safari) it is spaced exactly how I want it.
http://american-motorsports.net/2012/
When I view it in firefox, the kerning of the font is a little different causing a little black gap on the far right menu item. I can see the difference between the F and A in FABRICATION
The HTML is very simple right now:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="resources/css/reset.css" />
<link rel="stylesheet" href="resources/css/main.css" />
<title><?php echo date('M d, Y') . ' | '; ?>American Motorsports - Off-Road Fabrication</title>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">
<img src="resources/images/logo.png" width="291" height="150" alt="American Motorsports - Off-Road Fabrication" />
</div>
<div id="menu">
<span class="item">HOME</span><span class="item">SUSPENSION</span><span class="item">FABRICATION</span><span class="item">PROJECTS</span><span class="item">MEDIA</span><span class="item">CONTACT</span>
</div>
</div>
<div id="main"></div>
</div>
</body>
</html>
and the CSS consists of this so far
#font-face {
font-family: bebas;
src: url("../fonts/bebas.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
body {
font-size: 14px;
color: #ccc;
line-height: 20px;
margin: 0;
padding: 0;
background: url("../images/bg.png") #202020;
}
#wrap {
background: url("../images/bg_main.jpg") no-repeat center top;
min-height:800px;
}
#header {
border-top: 5px solid #3a3a3a;
height:150px;
width:970px;
background-color:#000000;
margin: 50px auto;
}
#logo {
width:324px;
height:179px;
background-color:#121212;
border-top: 5px solid #3a3a3a;
border-bottom: 5px solid #ffffff;
margin-top:-22px;
float:left;
}
#logo img {
margin-left:13px;
margin-top:17px;
}
#menu {
width:646px;
height:150px;
float:right;
margin:0;
padding:0;
}
#menu a {
margin:0;
padding:0;
}
.item {
font-family:bebas;
font-size:18px;
height:150px;
display:inline-block;
text-align:center;
line-height:8em;
color:#fff;
cursor:pointer;
padding-left:20px;
padding-right:20px;
margin:0;
text-shadow: 0 3px 3px #111;
}
.item:hover {
background: -moz-linear-gradient(top, #3a3a3a 0%, #101010 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#101010));
background: -webkit-linear-gradient(top, #3a3a3a 0%,#101010 100%);
background: -o-linear-gradient(top, #3a3a3a 0%,#101010 100%);
background: -ms-linear-gradient(top, #3a3a3a 0%,#101010 100%);
background: linear-gradient(to bottom, #3a3a3a 0%,#101010 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#101010',GradientType=0 );
}
#main {
width:970px;
/*background-color:#ffffff;*/
margin: 0 auto;
}
So the question is how to remove the gap so it looks like chrome and safari or fix the kerning issue..I just dont want that gap in firefox
You'd have to wrap a span around the offending letters and tweak the CSS letter-spacing: property until you get what you want. The finesse of good typography, especially when it comes to custom fonts, isn't quite ready for prime-time on browsers. Plan B: use an image.
A quick dirty solution is
#menu{
white-space: nowrap;
overflow: hidden; /* means you don't get a dirty edge, but the last link may be smaller on the right */
}
Ideally though, you shouldn't be relying on the width of the font to make your menu look right.
If you have the time, give each of these links a class, and a custom width.
Or even better, use a list with links in each item, to get greater control.
For example, if you add:
.item{
padding: 0;
width: 16.66%; /* assuming you always have 6 links */
}
...they will always fit, but some will look rubbish.
For the most professional-looking finish, you'll want to give each a class and custom width.
I don’t see what gap you are trying to remove, but what you are describing is the issue that Firefox (modern versions) apply kerning by default, if defined in a font. Other browsers don’t. So it’s a matter of kerning vs. no kerning, not a difference in kerning. Kerning is generally considered as typographically desirable. But if you really want to prevent Firefox from kerning, that’s possible using font feature settings, e.g. in this case with
#menu { -moz-font-feature-settings: "kern" 0; }