I want to place a picture in the header following by a horizontal menu under the picture.
So I divided the header in two subregio's: img and navbar (html). I get the navbar correct, but the picture does not appear. Anyone an idea? What is the problem in my css-part? Thank you!
<div id="header">
<div id="img">
</div>
<div id="navbar">
<ul>
<li>home</li>
<li>band</li>
<li>contact</li>
</ul>
</div>
</div>
<!-- end header -->
#header{
height: 300px;
background: black;
}
#header img{
background-image: url("img/despikes-header.jpg");
background-repeat: no-repeat;
}
#navbar{
color: white;
font-size: .9em;
font-weight: normal;
font-family: Tahoma, Arial, sans-serif;
font-variant-caps: all-small-caps;
text-decoration: none;
float: left;
text-align: center;
}
#navbar ul{
height: auto;
padding-top: 8px;
padding-left: 20px;
}
#navbar li{
display: inline;
padding: 3px;
}
Apologies for posting as an answer rather than comment, however my rep isn't high enough to comment yet.
Your CSS is incorrect.
Rather than #header img, you should be using #header #img and go from there.
You may well need to apply a height (and perhaps background-size to that styling too, otherwise the div id="img" doesn't know what size to be.
As an aside, you should probably look to avoid using ids and use classes instead.
Hope this helps.
Related
I feel like an idiot because I know this a simple thing. I can't figure why the logo and tagline images aren't in the grey container together.
I also can't under why my h2 and ul are on top of my image. All help is appreciated. This what it's supposed to look like https://imgur.com/a/3Qx3ihp
and this is how it renders now https://imgur.com/a/WGyYzPr
<div id="topbar">
<img src="hw8_images/logo.png" alt="Blaine and Associates logo"><img src="hw8_images/blaine-tagline.png" alt="Blaine and Associates Inc. tagline"><img src="hw8_images/architectural-tagline.png" alt="Architectural Design and Consulting">
<ul class="nav">
<li>Contact</li>
<li>Employment</li>
<li>Projects</li>
<li>Services</li>
<li>Company</li>
</ul>
</div>
<div class="buildingimage"></div>
<div id="container">
<h2>Quick Links</h2>
<ul id="QL">
<li>Free Consultation
</li>
<li>Client List</li>
<li>Testimonials</li>
<li>Open Positions</li>
<li>Latest News</li>
</ul>
</div>
body {
font: normal normal normal 75%/1.3em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none; background-color: #fff;
}
.topbar{
background-color: #4d4d4d;
font-color: #fff;
height: 15px;
min-width: 500px;
max-width: 950px;
}
.nav li{
font: normal normal normal 100%/2em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none;
display: inline-block;
list-style: none;
text-decoration: none;
text-align: center;
float: right;
}
h1 {
font: normal normal normal 140%/1.3em verdana,geneva,lucida,arial,sans-
serif; text-decoration: none;
}
h2 {
font: normal normal normal 120%/1.3em verdana,geneva,lucida,arial,sans-
serif;
text-decoration: none;
float: left;
position: relative;
}
footer li {
display: inline-block;
list-style-type: none;
font: normal normal normal 90%/2em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none;
text-align: center;
background-color: #4d4d4d;
font-color: #fff;
}
#container {
position: relative;
height: 300px;
width: 400px;
}
.buildingimage {
background-image: url(hw8_images/building.jpg);
float: left;
background-repeat: no-repeat;
position: absolute;
margin: .5em;
background-size:cover;
height: 7em;
min-width: 200px;
max-width: 250px
}
#QL {
list-style: circle;
float: left;
position: relative;
}
"I can't figure why the logo and tagline images aren't in the grey container together."
They are inside, but the container is not styled, as you can't find it with .topbar, because it is an id not a class.
So #topbar will do it. If you make it bigger than 15px, all elements will be displayed inside.
The H2 and ul are on top of the background-img, because it is positioned abolute. If you change it to relative, the image will float left and the H2 and ul align on the right to it.
The problem is that you added float:left to your h2 and #QL selectors. Floating elements can be dangerous if you don't understand how it works. It removes the element from standard flow and then pushes it all the way to the top and to the left or right as assigned. It only stops for other elements that are floating, or for elements that have clear set to either the same side (left or right) or both.
Check out this CSS-Tricks article for more details.
I would also recommend you do some reading about fundamental CSS concepts. CSS-Tricks has a good collection of beginner concepts. I think you may find some of them helpful.
Your .buildingimage is in position absolute, he shouldn't ! Something put into absolute allows the element to overlap to others. Put it to "relative" or delete it if you don't really need it. there is also your h2 which got a float.
So, I'm trying to have two "halves" of the navigation thing under this title page thing, one floated left, the other right.
For some reason, They're not beside each other like they should be, unless I'm doing something wrong. Code is as follows:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Landing Mockup</title>
<link href="mockup.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="landing-container">
Hello. I'm Charles Baker.<br />
<span id="landing-codeblock">{ I design websites. }</span>
<div id="landing-links">
<div id="landing-links-left">
Small links here.
</div>
<div id="landing-links-right">
<ul>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
CSS:
body {
margin-top: 200px;
font-family: 'Roboto Slab', serif;
}
#landing-container {
width: 1000px;
margin: 0 auto;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
#landing-codeblock {
font-family: 'Droid Sans Mono', monospace;
font-size: large;
}
#landing-links {
width: 700px;
margin: 0 auto;
border: 1px solid blue;
}
#landing-links-left {
border: 1px solid orange;
float: left;
text-align: left;
font-size: x-small;
width: 200px;
}
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right;
}
#landing-links ul {
border: 1px solid green;
list-style-type: none;
}
#landing-links ul li {
border: 1px solid red;
display: inline;
}
#landing-links li a {
display: inline-block;
padding: 5px;
}
#clear {
clear: both;
}
I've got borders temporarily so I can see where things are, but...yeah. I need to float them next to each other, I think I'm doing something entirely wrong. Any thoughts?
Behold! http://jsfiddle.net/QHeDZ/
I added display:inline-block to your .landing-links-left and .landing-links-right css and removed your floats. I think this is what you were trying to do? If not, let me know! I can fix it up.
You're getting a wedge of top (and bottom) margin as a browser default. If you inspect your unordered list in Chrome you'll see from the user agent style sheet:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You can set the margins on your list to 0 to remove this default. Also, I would recommend having a look at http://necolas.github.io/normalize.css/ which provides a nice set of default rules for common elements, taking the pain away from these kind of issues.
Just add <div id="clear"></div> before closing this div <div id="landing-links">
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right; //modify this to left(so it could be next to the other container)
}
Hope this helped you!Cheers!
Technically they are on the same line, but margin and line-height values aren't being clearly defined for better aligning. Including the following properties:
#landing-links-left { line-height: 20px; }
#landing-links ul {
margin: 0;
line-height: 20px;
}
Hell o, I have floating menu fixed on top of the screen of my single page web site. When I click the menu item, page slowly scrolls down to appropriate section using jquery. I have this code for fixed menu on top of the screen:
<style>
.fixed_elements{ position:fixed; top:100px; }
#top-floating-bar{ background: none repeat scroll 0 0 #2D2D2D; height: 35px; position: fixed; top: 0; width: 100%; z-index: 100; }
ul{ padding: 0; margin: 0; }
.fixed-bar-buttons{ float: left;color: #fff; }
.fixed-bar-buttons ul { height: 25px; padding-right: 10px; }
.fixed-bar-buttons ul li{ display: block; float: left; font-family: sans-serif; font-size: 14px; font-weight: bold; height: 25px; padding-left: 10px; padding-right: 10px; padding-top: 10px; }
.fixed-bar-buttons ul li:hover{ background-color: #605F5F; }
#content-panel{ float: left;margin-top: 40px; }
</style>
</head>
<body>
<div id="top-floating-bar">
<div class="fixed-bar-buttons">
<ul class="nav">
<li>REFERENCIE</li>
<li>KONTAKT</li>
</ul>
</div>
</div>
<div id="section2"> Section2 content</div>
<div id="section3"> Section3 content</div>
...
The code is OK and everything works fine. The thing I need to do is to modify the menu when it's on section2 and section3 only and add "UP" button.
When I load the page, I don't need the "UP" button, because It's not possible to go up and it's confusing to be there, so I need it only if I scroll down. Is it possible with CSS(1,2,3) only? Thank you!
Not possible, because you have to fetch the vertical offset of the document to know if the user is at the top of the page, or have scrolled down. The vertical offset is needed to make the decision whether to display the up button or not.
There is a way to do it with JS, but if you're asking for a CSS-only solution, I've given you the bad news already :P
My apologies if this too basic of a question but CSS is boggling me. I think I'm doing something that CSS is supposed to do easily but it is simply not working the way I read the documentation.
Here's my example. It's been massively simplified but the basic problem remains. I'm sure this is some core misconception on my part, I just don't know where it lies.
Here's the goal:
Here's what I get now:
Here is the HTML:
<div id="line-wrapper">
<div id="block-nice-menus-1">
<ul id="nice-menu-1">
<li><span title="Departments" class="nolink">Departments</span>
</li>
</ul>
</div>
<div id="block-imageblock-40">
<img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
alt="" />
</div>
<div id="block-imageblock-42">
<img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
alt="" />
</div>
</div>
And here's the CSS:
/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
background-color: #ff0000;
}
#block-nice-menus-1 {
position: relative;
float: right;
margin-right: 0px;
height: 40px;
border: none;
background: #d6b982;
}
#nice-menu-1 {
display: block;
padding: 0px 30px;
border-top: none;
border-bottom: none;
color: #000;
background: #d6b982;
line-height: 2.4em;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform:uppercase;
text-decoration: none;
}
#nice-menu-1 ul, #nice-menu-1 li {
border-top: none;
border-bottom: none;
border-color: #e11837;
}
#block-imageblock-40 {
/* top-menu-swish */
float: right;
margin: 0px;
}
#block-imageblock-42 {
/* top-menu-leading-line */
bottom: 0px;
height:6px;
width:100%;
background: #d6b982;
}
I can't get the floats right (I know, Yet Another Float Question). The main issue is that this is going to be a menu with a variable number of items, so as the menu grows, ("Departments" now, but later "Departments", "Services", "Sections", etc.) it should push to the left, reducing the length of the line I can't use a fixed length on the leading line (#block-imageblock-42). Also, the menu items will have separators, so I can't just full-width things. This needs to be done in pure CSS, no jQuery or other JS.
Here's my JSfiddle of the problem: http://jsfiddle.net/zjfsy/
UPDATE: I have modified the question to be more specific per the requests of folks trying to help. The "goal" image at the top has been updated to more accurately reflect the issue. One thing I really want to make clear is that this specific instance is not so important. I already doctored up a position:absolute fix that will hold for the short term. My desire is to understand better why this is so hard. I have three containers. I want two of them to float right and the third to expand to fill the space from the last container to the edge of the page. It seems like this is what float was supposed to do. I assume this is some base misunderstanding on my part.
Anyway. Here's more constraints:
The leading bar needs to expand to fill the empty space between the
left side and the swish.
Each of the tabs needs to have a separator that allows the background through.
The number of the tabs is variable, based on client choices -- which
can change regularly.
I can't really change the structure of the HTML, other than
modifying it with CSS.
And again, all help is very much appreciated.
here is my solution: http://jsfiddle.net/abbood/b56Vq/ (never used jsfiddle before.. so sorry if i did this wrong, or if i was supposed to fork your project)
here is the code:
<html>
<head>
<link href="betterStyle.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<ul>
<li><div></div><div>Departments</div></li>
<li><div></div><div>Services</div></li>
<li><div></div><div>Sections</div></li>
<li><div></div><div>stuff</div></li>
</ul>
</div>
</body>
</html>
//betterStyle.css
#wrapper {
height: 2.5em;
background-color: #e0203b;
background-image: url('http://s11.postimage.org/a1jmymlgv/bage_Box.png');
background-position: bottom;
background-repeat: repeat-x;
}
ul
{
list-style-type: none;
float: right;
margin: 0;
padding: 0;
}
ul li {
float: right ;
display: inline-block;
}
/* text */
ul li div:nth-child(2) {
line-height: 2.5em;
line-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform: uppercase;
background-color: #d6b982;
float: right;
padding-right: 1em;
}
/* image */
ul li div:nth-child(1) {
background-image: url('http://s8.postimage.org/b2qycoatd/top_menu_swish.png');
background-position: left top;
background-repeat: no-repeat;
float: left;
width: 53px;
height: 40px;
line-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform: uppercase;
}
notes:
i created my own image and I linked to it using some image hosting service.
you can add as many tabs as you want (i assumed that each tab will have that image attached to it.. i wasn't sure how you wanted the final thing to look like (the right edges look too sharp).. but i'm sure you can adjust it to your liking.. when adding extra tabs the horizontal line shrinks.. i think that's what you meant when you said so as the menu grows, it should push to the left, reducing the length of the line
update:
Here is the updated answer without changing a line in the html: http://jsfiddle.net/abbood/SkxkC/ (for some reason there is a bump under the folder image in jsfiddle.. i tested it on mac chrome/safari/firefox and they worked fine.. lemme know if it isn't working perfectly for you though)
html (pretty much same.. just added a couple of tabs just for fun):
<body>
<div id="line-wrapper">
<div id="block-nice-menus-1">
<ul id="nice-menu-1">
<li><span title="Departments" class="nolink">Departments</span>
</li>
<li><span title="Departments" class="nolink">Services</span>
</li>
<li><span title="Departments" class="nolink">Classes</span>
</li>
</ul>
</div>
<div id="block-imageblock-40">
<img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
alt="" />
</div>
<div id="block-imageblock-42">
<img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
alt="" />
</div>
</div>
</body>
css:
/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
background-color: #ff0000; /* red */
height: 40px;
position: relative;
z-index: -2;
}
#line-wrapper div {
background-color: #ff0000; /* red */
}
#block-nice-menus-1 {
position: relative;
float: right;
margin-right: 0px;
height: 40px;
border: none;
background: #d6b982;
}
#nice-menu-1 {
display: block;
border-top: none;
border-bottom: none;
color: #000;
line-height: 2.4em;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform:uppercase;
text-decoration: none;
margin: 0;
padding: 0;
}
#nice-menu-1 ul {
padding: 0;
background-color: #ff0000; /* red */
}
#nice-menu-1 ul, #nice-menu-1 li {
border-top: none;
border-bottom: none;
border-color: #e11837;
}
#nice-menu-1 li{
list-style-type: none;
display: inline-block;
padding: 0 2em;
background: #d6b982; /* bage */
height: 40px;
}
#block-imageblock-40 {
/* top-menu-swish */
float: right;
margin: 0px;
}
#block-imageblock-42
{
/* top-menu-leading-line */
bottom: 0px;
height:6px;
width:100%;
background-color: #d6b982 !important;
position: absolute;
z-index: -1;
}
I a have also done something similar that does not use the position:relative feature for the #line-wrapper since that may cause you some problems when you implement it.
See http://jsfiddle.net/zjfsy/
#block-imageblock-42 {
/* top-menu-leading-line */
height:6px;
width:100%;
background: #d6b982;
position:absolute;
margin-top:34px;
}
#line-wrapper {
display: block;
height: 40px;
width: 100%;
background-color: #ff0000;
}
Hope this helps! (I am definitely going to vote wxactly's answer up since it is a better answer than mine since it doesn't require "hard coding" with magic number margins, etc. Definitely use his answer if you can, but now at least you have two different ways.
Hey guys was hoping you can help me out.
been at this for like more than an hour and its driving me crazy.
basically I am a big novice when it comes to CSS but am learning. at the moment I am trying to replicated a menu that looks like this:
what I have so far looks something like this (i know the fonts different but not problem):
As you can see, ive got the background but I just CAN NOT figure out how make the start, end and the breaks (black line part) between each tab.
Also, basically the start, break, end I have as .jpg images. Not looking for html5 or css3 curves etc to do this. Just want to keep it simple :).
this is what I got so far. It would be great if you could could give me some tips on how I could make whats remaining and in case ive used a not-so-great approach, suggest an approach which would be better.
the html:
<div id="header">
<ul id="header-list">
<li class="header-list-item">
<span class= "header-list-item-span" >Home</span>
</li>
<li class="header-list-item">
<span class= "header-list-item-span" >About Us</span>
</li>
<li class="header-list-item">
<span class= "header-list-item-span" >Services</span>
</li>
</ul>
</div><!--END OF HEADER -->
the css:
#header-list{
display: table;
position: relative;
left: -3em;
table-layout: fixed;
margin-bottom: 0PX;
margin-top: 0;
margin-left: auto;
}
.header-list-item-span{
background-image: url("img/menubody.jpg");
color: white;
display: inline-block;
width: 5em;
font-size: large;
text-align: center;
padding: .2em;
}
.header-list-item{
display: table-cell;
height: 4.2em;
vertical-align: bottom;
}
Here's an idea:
Wrap the ul in a div. Set the first jpg as a background image for that div, and add some padding-left so that the image can be visible.
Set the last jpg as a background image for the ul and add some padding-right so that the image can be visible too.
Also, in my opinion, you should simplify your HTML by taking more advantage of CSS selectors.
The header list can be selected as div#header > ul.
The items that you are selecting with the class header-list-item can be selected with div#header > ul > li.
I don't think the span is actually necessary, you could apply the styles directly to the li elements.
Wrap the ul in another div and add padding on the inside to the left and you can place your start image as the background. Then make the right image the background of the ul and add padding on the right.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<style>
div,li,ul,span { margin: 0;padding: 0;}
body { width: 700px; margin: 0 auto; }
#header
{
background: url(http://www.lucascobb.com/wp-content/uploads/2012/02/1-plastic-navigation-bar-565x182.jpg) top center repeat;
padding-top: 50px;
position: relative;
}
#header .nav
{
background: url(http://www.ultracomwireless.com/images/button_left.png) top left no-repeat;
float: right;
width: 413px;
padding-left: 26px;
margin-right: 20px;
}
#header .nav .nav-wrapper
{
background: url(http://www.ultracomwireless.com/images/button_right.png) top right no-repeat red;
padding-right: 26px;
}
#header ul
{
position: relative;
list-style: none;
}
#header ul li
{
background: red;
width: 120px;
float: left;
text-align: center;
}
#header ul li span
{
color: white;
padding: 8px 0px;
}
.clear { clear: both;}
</style>
</head>
<body>
<div id="header">
<div class="nav">
<div class="nav-wrapper">
<ul>
<li><span>Home</span></li>
<li><span>About Us</span></li>
<li><span>Services</span></li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</body>