been trying to get my logo which is a .gif to float on my header image and stick there even when resizing page
almost had it, then i resized my window. Am i wasting my time because i actually give up been trying for hours with no luck.
<head>
<meta charset="utf-8" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>B.13 DJ Hire</title>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" media="screen" href="bubba.css"/>
</head>
<body>
<div id="box">
<div id="header">
<a href="index.html" class="banner">
<img src="images/banner.jpg">
</a>
<a href="index.html" class="logo">
<img src="images/logo.gif">
</a>
</div>
<h1>B13. DJ Equipment Hire</h1>
<nav>
<ul id="mainnav">
<li class="home">Home</li>
<li class="mixers">Mixers</li>
<li class="turntables">Turntables</li>
<li class="mp3">MP3 Media Players</li>
<li class="headphones">Headphones</li>
<li class="contact">Contact Us</li>
</ul>
</nav>
<h2> Our Equipment Range<h2>
<br><br>
<p> we are a equipment hire company..</p>
<br>
<p id="footer">45 Marsh Grass Ln. • Marble, MN 55764 • (218) 555-5253</p>
</div>
</body>
Here is my CSS code
body {
padding: 0;
margin: 0;
font-family: tahoma, arial, helvetica, sans-serif;
}
h1, h2 {
text-align: center;
font-family: georgia, "times new roman", times, serif;
}
h1 {
margin: 0;
font-size: 2em;
color: white;
background: #585858;
line-height: 1.90em;
width: auto;
text-align: centre;
background-position: center;
text-shadow: 2px 2px 4px #000000;
border-radius: 0.30em;
}
h2 {
font-size: 1.5em;
}
#box {
border-style: none;
width: 70em;
padding: 0em;
margin-left: auto;
margin-right: auto;
background: #C2C2C2;
}
#header{
}
.banner img{
position: relative;
float: left;
height:206px;
width:1120px;
z-index: 1;
display:block;
}
.logo img {
position: absolute;
float:right;
margin-top: 0px;
margin-left: 0px;
z-index: 2;
height:290px;
width:712px;
bottom:335px;
right:50px;
}
#footer {
background: #A6A6A6;
text-align: right;
padding: 0.25em;
margin: 0;
}
.callout {
font-weight: bold;
}
#mainnav {
text-align: center;
background: #A6A6A6;
padding: 0.75em;
margin: 0;
position: relative;
border-radius: 0.5em;
}
#mainnav li {
display: inline-block;
list-style-type: none;
padding: 0;
background: A6A6A6;
color: #A6A6A6;
}
#mainnav a:link{
color:black;
background-color: transparent;
text-decoration: none;
}
#mainnav a:hover{
color: blue;
background-color:#C2C2C2;
text-decoration: underline;
text-shadow: 8px 12px 12px blue;
}
#mainnav a:visited {
color: black;
}
#mainnav li.home a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.home a:hover {
color: black;
background-color:#C2C2C2;
padding: 10px 20px;
}
#mainnav li.mixers a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.mixers a:hover {
color: black;
background-color:#C2C2C2;
padding: 10px 20px;
}
#mainnav li.turntables a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.turntables a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#mainnav li.mp3 a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.mp3 a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#mainnav li.headphones a{
color:#black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.headphones a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#mainnav li.contact a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.contact a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#slideshow {
position:absolute;
text-align: center;
}
#pics {
margin-left: auto;
margin-right: auto;
width: 50%;
float: right;
text-align: center;
}
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 0px;
}
img {
max-width: 120%;
display: block;
background-size: 100%;
}
img {
max-width: 100%;
display: block;
}
#slideshow {
wd
You say you want to float your image, and you have float stated for the logo style, but you also have position:absolute stated as well. You need to use one or the other to achieve your goal my friend.
Also you are missing a few closing DIVs in your code. Can you share a URL to your issue? that may be easier than seeing the incomplete code.
Your CSS styling you have (position:absolute) is causing the problem. Along with the fact that you have it positioned exactly in a fixed spot on the page with your position properties like "top" "bottom" "left" and "right". You do not want this when you have a logo in a spot on the page that doesn't move around (like in your header). To fix this, you want to remove what you had under the CSS for ".logo img" and put the following:
.logo img {
height:200px;
width:200px;
}
Here is an example of it: https://jsfiddle.net/Lp7fwm7a/. When you resize the window, the logo stays in the correct place like how you want it.
You might also want to look into the float property if you have two div's in your header. Here's a good article on it: https://css-tricks.com/all-about-floats/.
Using the position: absolute; attribute means that image is being positioned according to the browser window (because you don't have any other absolute positioned elements on the page).
Your top and bottom values are counting from the edge of the browser window, not from the edge of your image.
You can center it like by replacing .logo img with:
position: absolute;
left: 0;
right: 0;
margin: 0 auto 0;
height: 290px;
width: 712px;
z-index: 2;
Your logo is a lot taller than your header image. I noticed the top of the logo in your code was cut off, not sure if you meant to do that or not but if you edit that first 0 in margin, you can adjust the top margin. -100px or so should put it back where you had it.
Also just a comment about what the other answers say, you're not missing a closing div tag - there's just really inconsistent indentation making your HTML and CSS really difficult to read. You are missing a / in the closing h2 tag and you spelled 'center' as 'centre' in your h1, h2 CSS.
Here's a link to all the fixes (including indentation): http://codepen.io/anon/pen/KpXKVG
Related
It is hard to learn "float" "overflow" "clear" and some other properties so please help me find good online websites to learn these properties ..
I opened some websites to make designs like them I found http://wix.com I admired its nav bar so i tried to make like it but i had a problem when mouse is over the il it is pushed down to show the top border how can I fix that
thanks and I am sorry for my weak English
body {
background-color: lightblue;
}
ul {
position: fixed;
list-style-type: none;
overflow: hidden;
top: 0px;
right: 0px;
width: 100%;
margin: 0px;
padding: 0px;
padding-top: 8px;
padding-bottom: 8px;
display: block;
background-color: #666666;
transition:background-color, 1s;
}
ul:hover {
background-color: #333;
}
il {
transition:border-top,1s;
float: left;
padding-right: 10px;
border-right: 1px solid white;
}
il:hover {
border-top:5px solid lightblue;
}
#navl {
font-family: Trebuchet MS’, Helvetica, sans-serif;
letter-spacing: 3px;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
pre{
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
letter-spacing: 2px;
font-size: 30px;
text-align: center;
color: white;
margin-top: 150px;
}
#plans:link, #plans:visited {
background-color: white;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: block;
border: 1px solid white;
border-radius: 30px;
margin: auto;
width: 110px;
padding-top: 20px;
padding-bottom: 20px;
font-size:20px;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<il><a id="navl" href="index.html">Home</a></il>
<il><a id="navl" href="Plans.html">Plans</a></il>
<il><a id="navl" href="About.html">About</a></il>
<il><a id="navl" href="Contact.html">Contact Us</a></il>
</ul>
<pre>test</pre>
<a id="plans" href="plans.html">Plans</a>
</body>
</html>
The reason this happens is because the border adds height to the element. To correct it, you can either remove height from the main element or shift it up:
li:hover {
margin-top: -5px; //shifts the element up 5px
}
or you can have an invisible border as Teuta mentions that gets "covered up" by the new border.
At first, replace those il with li, and add this style to your li:
li {
border-top: 5px solid transparent;
}
And in ul, instead of padding-top:8px add padding-top:3px.
Here is the link with a little work around I did. I removed the padding top in ul. Changed the il to li. Because actually it is 'li' not 'il'. And I added a border top in li.
Here is the css code I changed.
ul:hover {
background-color: #666666;
}
li {
transition:border-top,1s;
float: left;
padding-right: 10px;
border-right: 1px solid white;
border-top:5px solid #666666;
}
li:hover {
border-top:5px solid lightblue;
}
https://jsfiddle.net/7x7dy3jt/
I am new to learning HTML and CSS. I am attempting to recreate some of the design interfaces of a certain site, but have run into a problem. The navigation menu, though in the header, appears below it for some reason. I have attempted multiple combinations of fixes but they do not end up working and I am too much of a novice to completely understand why it may be doing such a thing. I have uploaded my site and left the directories open to explore. The code is very small, so it should be somewhat easier to point out my mistake.
http://razorcloud.cz.cc/
HTML:
<body class="body">
<header class="header">
<img style="padding-left: 20px" src="images/versace-logo.bmp" width="230" height="120" />
<div class="bottom-header">
<div class="navigation-bar">
<ul>
<li>
Home
<div class="dropdown-container dropdown-shadow">
<div class="dropdown-column">
<p>This is a simple test to determine how dynamic and fluid the dropdown-container is.</p>
</div>
</div>
</li>
</ul>
<ul>
<li>
Video
</li>
</ul>
</div>
</div>
<!--<div class="header-alert">
This website is still under development!
</div>-->
</header>
CSS:
.body
{
margin: auto;
width: 95%;
clear: both;
}
.body a
{
color: inherit;
}
.header
{
background-color: black;
color: white;
display: block;
font-family: "GillSansStdRegular";
margin-bottom: 20px;
position: relative;
}
.bottom-header
{
display: block;
position: relative;
padding: 0 20px;
}
.navigation-bar
{
color: white;
display: inline-block;
font-size: 12px;
float: right;
text-transform: uppercase;
}
.navigation-bar > ul
{
border: transparent 1px solid;
border-bottom: 0;
float: left;
height: 34px;
list-style: none;
margin-left: 5px;
}
.navigation-bar > ul a
{
display: block;
line-height: 16px;
margin-right: 23px;
padding: 0px 2px 0px 2px;
text-decoration: none;
}
.navigation-bar > ul:active a
{
background-color: white;
}
.navigation-bar > ul:hover a
{
color: black;
height: 31px;
background: white;
}
.navigation-bar > ul:hover .dropdown-container
{
display: block;
}
.dropdown-column
{
}
.dropdown-container
{
color: black;
display: none;
position: absolute;
z-index: 99;
left: 0;
width: 100%;
border-color: black;
border-top: 2px;
border-top-style: solid;
}
.dropdown-shadow
{
margin-top: 0;
background: url("../images/backgrounds/submenu-bg.png");
-webkit-box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
-moz-box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
}
.dropdown-shadow:after
{
display: block;
clear: both;
}
.header-alert
{
background-color: white;
border-bottom: 2px solid black;
color: black;
font-family: "GillSansStdLightRegular";
font-size: 110%;
text-align: center;
text-transform: uppercase;
width: 100%;
}
You need to float your elements. Inside the header the<img/> should be set to float:left and the navigation container (.navigation-bar) needs to be set to float:right. And you'll need to add a clearfix after the floats:
FIDDLE
Unfortunately, I have always the same problem with heigths of divs.
I want that my div (If the content is minimum) fills the monitor. Otherwhise, if the content exceed the page I use the scrollbar (overflow:scroll) and this part is ok.
My page is composed like this:
<div id="container">
<div id="header"> ...</div>
<div id="navigation"> ... </div>
<div id="content"> ...
<div id="testo"></div>
</div>
I would like that the div content match the heigth of the page of the browser.
If you watch this example http://jsfiddle.net/EBnD2/
you can understand what is my problem.
thanks in advance!
Here's a script driven solution:
And the script that does the trick (I've used jQuery for convenience. Feel free to resort to pure javascript, if necessary :
$(document).ready(function () {
$("#content").css("height",
(
$(document).outerHeight()
- $("#header").outerHeight()
- $("#navigation").outerHeight()
- $("#footer").outerHeight()
- parseInt($("#content").css("padding"))) + "px");
});
Here's the updated style definitions:
html {
}
body {
min-width: 1150px;
overflow: auto;
background-color: pink;
margin: 0px;
}
#container {
margin: 0 100px;
background: #fff;
border-top: 1px solid grey;
font-family: sans-serif;
}
#header {
text-align:center;
background: #ccc;
padding: 20px;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
#header h1 {
margin: 0;
}
#testo {
font-family: times, Times New Roman, times-roman, georgia, serif;
font-size: 18px;
line-height: 30px;
text-transform: uppercase;
color: #444;
}
p.sx {
text-align: left;
}
p.cx {
text-align: center;
}
p.dx {
text-align: right;
}
#navigation {
float: left;
width: 100%;
background: #CC3366;
font-weight: bold;
font-size: 90%;
font-size-adjust: inherit;
}
#navigation ul {
margin: 0;
padding: 0;
}
#navigation ul li {
list-style-type: none;
display: inline;
}
#navigation li a {
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover {
background: #993366;
}
#navigation li a.selected {
background: grey;
}
#content {
background-color: white;
border-left: 1px solid grey;
border-right: 1px solid grey;
padding: 20px;
}
#content h2 {
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}
#footer {
border: 1px solid grey;
background: #ccc;
text-align: right;
padding: 20px;
}
I am a bit stumped as to how I can center the text on the navigation bar as at the moment it is only going to the left. I have already tried center align but it still continues to stick to the side. If anyone could tell me what error I am making this would be greatly appreciated.
HTML:
<body>
<div id="wrap">
</div>
<ul id="nav">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
<div id="content">
</div>
</body>
CSS:
body {
margin: 0;
padding: 0;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
background-color:#425eb4;
}
*{
margin: 0 auto 0 auto;
}
#wrap {
height:150px;
background:url(images/header1.png) no-repeat center;
text-align:center;
background-color:#FFF;
}
#nav {
width: 100%;
float: left;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left;
text-align:center; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
text-align:center;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
text-align:center;
background-color: #fff;}
/* End navigation bar styling. */
#content {
padding: 0 50px 50px;
width:1000px;
height:800px;
background-color:#FFF;
}
You need to take the float:left off of both your #nav and li elements.
Then add display:inline-block; to both. Next add your text-align:center to the #nav.
#nav {
width: 100%;
display: inline-block;
text-align: center;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
margin-left: 0px; // looks like bootstrap is putting a left margin on your #nav you may want it off.
}
#nav li {
display: inline-block;
text-align:center;
}
Use this CSS:
Take the floats off, use display:inline-block to put the lis beside each other, and use text-align:center on the #nav. Is this what you're looking for?
body {
margin: 0;
padding: 0;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #425eb4;
}
* {
margin: 0 auto;
}
#wrap {
height: 150px;
background: url(images/header1.png) no-repeat center;
text-align: center;
background-color: #FFF;
}
#nav {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
display: inline-block;
text-align: center;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: 700;
text-align: center;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
text-align: center;
background-color: #fff;
}
/* End navigation bar styling. */
#content {
padding: 0 50px 50px;
width: 1000px;
height: 800px;
background-color: #FFF;
}
IMO adjust your CSS to be something generally like (I am omitting values specific to your code and just including generally necessary ones for your general goal):
#wrap {
width:100%;
}
#nav {
width:300px; //however wide your nav container needs
margin:auto; //this is what will center an elem, relative to its parent (in
//this case a 100% wide wrap; the 100% is relevant because it
//keeps things centered as window is resized.
}
All good input, I think this will help someone too,,,
I use something like this usually,
It's balanced / centered / and block so all is clickable
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
a {
display: inline-block;
width: 80px;
background-color: #dddddd;
text-align: center;
}
li {
width: 100px;
margin: auto;
display: inline;
}
p {
clear: both;
margin: 10px 5px;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<p>Notice we are all centered</p>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
I would like to have a little triangle underneath the the text that points up when the user hovers over the different tabs. Here is a bit of code I'm working with.
css navbar
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 10px;
}
.tab {
width: 100%;
padding: 5px;
background: #fff;
color: #000;
cursor: pointer;
font-weight: bold;
border-bottom: 1px solid black;
position: relative;
}
.tab:hover {
background: #a0a0a0;
}
.tab:hover span {
display: block;
}
.tab_child {
padding: 15px;
background: #fff;
}
.selected {
background: #a0a0a0;
}
.contain * {
float: left;
width: 100px;
}
span.triangle {
background-image: url("http://www.inner.org/torah_and_science/mathematics/images/triangle.gif");
background-repeat: none;
display: none;
height: 14px;
width: 16px;
position: absolute;
top: 25px;
left: 25%;
}
<div class="contain">
<div id="one" class="tab selected">Link1</div>
<div id="two" class="tab">Link2</div>
<div id="three" class="tab">Link3</div>
<div id="four" class="tab">Link4</div>
<div id="five" class="tab">Link5</div>
</div>
I think this is probably what you're looking for:
Fiddle
Also, please use semantic markup:
If your using HTML5 wrap your navigation in <nav> tags.
Your links (if they really are going to be links) should be <a> elements.
For a list of links like you have it is advised to use a list (<ul> & <li>).
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
float: left;
width: 20%;
}
nav a {
display: block;
padding: 5px;
border-bottom: 1px solid black;
background: #fff;
color: #000;
font-weight: bold;
position: relative;
}
nav a:hover,
.active {
background: #bbb;
}
nav a:hover:after {
content: "";
display: block;
border: 12px solid #bbb;
border-bottom-color: #000;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -12px;
}
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</nav>
Here is a modification to your jsfiddle:
I've added a <span class="arrow"></span> to contain the triangles in the HTML:
<div class="tab_container">
<div id="test1-header" class="accordion_headings header_highlight" >Home<span class="arrow"></span></div>
<div id="test2-header" class="accordion_headings" >About<span class="arrow"></span></div>
<div id="test3-header" class="accordion_headings" >Work<span class="arrow"></span></div>
<div id="test4-header" class="accordion_headings" >Social<span class="arrow"></span></div>
<div id="test5-header" class="accordion_headings" >Contact<span class="arrow"></span></div>
</div>
Here are the changes made to your menu which reduce the size of the triangle and position them at the bottom center of each menu item when hovered over:
CSS:
/*
.accordion_headings:hover{
background:#00CCFF;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid red;
}
*/
.accordion_headings{
position:relative;
}
.accordion_headings .arrow{
display:none;
}
.accordion_headings:hover .arrow{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid red;
display:block;
position:absolute;
bottom:0;
left:49%;
}
Here is a fiddle that uses an background-image that will display over the hovered menu item. It not pretty but further css should help with that.
UPDATE
Sorry I must have misread that. Here is a working fiddle with a smaller arrow pointing in the proper direction.