I know this sounds kind of confusing but I am wondering if it is possible to make a thick border line where the header is supposed to be?
I will try to explain it by giving an image:
I want the top part of my website page to have a different color, and then the lower part another color.
Is there any way I could use a html/css code to make this happen?
this is the way to do it but for a question like this you should researsh a bit and learn the basics
.header{
background-color:yellow;
width:100%;
height:150px;
}
.rest{
background-color:black;
width:100%;
height:700px;
}
<div class="header">
</div>
<div class="rest">
</div>
if i understand correctly, you can create a div and append following css:
border-top: 50px yellow solid;
background-color: #000000;
==============
In this way the header part will be only for design, you can't put a relative code inside the border.
If you want to use that space you can do the following:
<style type="text/css">
div.header {
text-align:center;
background-color: yellow;
color: #00000;
padding: 20px;
width: 100%;
}
div.body {
width: 100%;
backgroun-color: #000000;
color: #ffffff;
}
</style>
<div class="header">Title</div>
<div class="body">Content</div>
Hopefully will help you,
Cheers
You can try having an element for your header, this way you can include content in it.
HTML5 has added multiple new tags for better understanding, you can use the tag header for it and then define you content inside the tag main
For example:
body {
background: #FAFAFA;
padding: 0;
margin: 0;
}
header {
background: #3F51B5;
padding: 20px;
text-align: center;
color: white;
}
main {
padding: 20px;
}
<header>This is the header</header>
<main>
This is the content
</main>
There is a way, you have to use CSS to do this
lets say you have.It doesnt matter if you are using HTML5 or HTML4 the code below is only example
<section>Header</section>
<article>Body</article>
now you need to add to your <head></head> , style tag
<style></style>
but if you are using HTML4 it must be
<style type="text/css"></style>
Now you need to select one of those and give them color, in my example I will give them both color
<style>
section{
background-color:#000000;
}
article{
background-color:#FFFFFF;
}
</style>
background-color neednt to be in hexadecimal like #FFFFFF it can be in rgb(0,0,0) or rgba(0,0,0,0).
Related
I'm having a problem on img:hover
Here's my jsbin: http://jsbin.com/bereputu/1/edit
My problem is when I put my mouse over the "home" or "contact", the image that I want to replace the original appears a little under than I expected.
Here's my code:
<html>
<head>
<title>UltraLotus</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="container">
<div class="header">
<img src="images/header.png">
</div>
<center>
<div class="nav">
<img src="images/home.jpg">
<img src="images/contact2.jpg">
</div>
</center>
<div class="page">
<p></p>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
CSS
body {
background-image: url("images/bg.jpg");
background-repeat: repeat-y;
background-size: 100% 100%;
margin:0;
padding:0;
height:100%;
}
.container {
min-height: 100%;
}
.header {
background-color:#1a1a1a;
width:100%;
height:100px;
}
.header img {
position: relative;
margin-top:-30px;
}
.nav {
position:relative;
width:100%;
height:40px;
top: -15px;
background-image: url("images/nav.jpg");
}
.nav img {
position:relative;
margin-top:13px;
}
.nav a:first-child:hover {
position:relative;
background-image: url('images/home.jpg');
}
.nav a:nth-child(2):hover {
position:relative;
background-image: url('images/contact.jpg');
}
.page {
padding-top:5px;
top:150px;
padding-bottom:70px;
}
.footer {
position:absolute;
bottom: 0;
width:100%;
height:70px;
background-image: url("images/footer.jpg");
}
I'm not quite sure what you're looking to accomplish with the :hover styling, but it's replacing a totally different image than the one you're using in your original nav element.
For easier debugging, if you open up the chrome developer tools, you can force a hover state so you can look at all the applied css rules:
You'll notice that you're giving your a element a background-image on hover, but it's contents still contains an img element. Thus the double styling.
Note 1: Since they're both the same, you really don't even need the hover styling at all.
Note 2: This does not seem worth pulling in an image to me. You should be able to accomplish this exact style with native html an css. They render far quicker, they're much easier to download, they're much better for screen readers, they have much cleaner and clearer content, and they extend and adapt much easier. I'd skip the images altogether and go html/css for this.
Here's a little CSS to get your started:
.nav a {
color: grey;
font-size: 1.2em;
text-decoration: none;
border: 1px solid grey;
padding: 5px;
padding-bottom: 0px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
/* I even added in a little hover effect */
.nav a:hover {
background-color: #2C2C2C;
}
Here's your full site design without any images (except your logo):
http://jsbin.com/bereputu/2/
You can get much more sophisticated but I would avoid imaging out your design as much as possible. If you're doing web dev, learn CSS
I need to implement a menucard in to a website. My customer wants, that it looks exactly like on the card in the restaurant.
Is it with HTML possible to put a border-line directly under the text like on the image below ("Hauptgerichte")? And if yes, how could I realize that?
Thanks!
If you want the border to touch the text, you can adjust the line-height to something small:
p
{
border-bottom: 1px solid black;
line-height: 10px;
}
http://jsfiddle.net/kz43g/
Here is 1 variant - here is a fiddle.
html:
<div>
<p> some text </p>
</div>
css:
*{
padding:0;
margin:0;
}
div{
border-bottom:1px solid #000;
}
p{
margin-bottom:-5px;
}
i just put negative bottom margin to the text container (in this case the p tag)
This is possible in HTML / CSS: Example
HTML:
<h3 class="yourClass">Text place</h3>
CSS :
.yourClass{
width:300px;
border-bottom: 1px solid #000;
text-indent:50px;
line-height:80%;
}
In this example I'm changing the line height to move the text under the line and the then using text-indent to move it to the correct positioning. It should give you the desired results. There are a few ways to do this, but this will require less HTML.
Here is a JS Bin that shows how this could be done. I added a border to the bottom of the paragraph and a little padding to the left. Then I changed the line height of the paragraph so it would sit right on the border.
You could try working with:
text-decoration: underline;
I choose to use the border property for easy customization.
CSS from JS Bin:
p {
border-bottom:1px solid #333;
line-height: 50%;
padding: 0 0 0 40px;
}
Pure CSS solution is possible with pseudoelement after, see fiddle. The distance from text is done by the bottom:3px:
.underline {
position:relative;
}
.underline::after {
content: '';
width: 100%;
position:absolute;
bottom: 3px;
left:0;
border-bottom: 1px solid black;
}
edit: the line-height solution looks better :)
Put the text inside of a div. Then, make the div a set width. Then, add a border to the div.
<div id="title">
<h2> Hauptgerichte </h2>
</div>
/*CSS*/
#title{
width: 50px;
border-bottom: 2px solid #000000;
}
Put the header in H tags, then target the H tag with CSS and apply border bottom.
HTML
<div id="content">
<h1>title</h1>
</div>
CSS
#content h1{
Border-bottom:1px solid #999;
Width: 150px;
}
I have a topbar, i.e. something like Facebook or or StackExchange or Twitter's top portion of the screen, and I want it to have a different background than the rest of the page (the stuff below/the main body). How do I accomplish this?
you can use this code :
<div id="topbar">
</div>
and you can use Position:fixed; like twitter's topbar
body{
background: green;
}
#topbar{
width:100%;
background-color:blue;
height:80px;
position:fixed;
}
Try with this
css
body { background:#252525; margin:0;padding:0;}
.headerStrip{ height:40px; width:100%; z-index:1001; background:#F00; position:absolute; position:fixed;}
Html : Put it after body tag
<div class="headerStrip"></div>
You have to place the your header_block outside your wrapper
<div id="header_block">
...... Header_block Contents
</div>
<div id="wrapper">
...... Entire Page
</div>
css
#header_block
{
position:fixed;
width:100%;
float:left;
}
This should do the work
Best way to accomplish this is to use the CSS Background property.
For example stackoverflow is using a div with an id like the following to set the background color for the gray bar up top:
<div id="custom-header"></div>
Then in their css file they are using background-color like this; note the height as well:
#custom-header {
background-color: #EEE; <------------
height: 31px;
margin-bottom: -31px;
}
This gives us the grey bar up top which passes behind the StackExchange logo.
You can see that the body is set to white via CSS and the Background (shorthand) property:
body {
background: white; <-------------
color: black;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 80%;
text-align: center;
}
You can see that the footer div is taking it a step further by using background (shorthand) and border-top for the 7 pixel solid black line:
#footer {
color: #444;
background: #777; <------------
border-top: 7px solid black; <------------
clear: both;
padding: 15px;
margin-top: 30px;
}
This is a few years old now though, you might find value in running through some tutorials like this one from Net Tuts.
I have a div that is a link to another page. When someone hovers over the div(ie, link) I want the whole div's background color to go blue. I would like to do this all in CSS because javascript may not work with everyone.
My Problem: My code below attempts to do this, the link works fine BUT when I hover over the div the background doesn't change color. What do you think I am doing wrong & how do you think I can fix this to make the div change background color on hover?
I have a feeling that I should place the link(a element) inside the div(instead of outside) but I can never get the a to stretch to the full space of the div that way.
<html>
<head>
<style type="text/css">
<!--
body { background-color: RGB(218,238,248); }
#rentalAnnc { margin-top: 5%; border-color: #99CCFF; padding-left: 10px; padding-right: 10px;
border-width:thin; border-style:solid; border-right-width:thick;
border-bottom-width:thick; background-color: #FFFFFF; width: 300px; }
/* Using pure CSS I am trying to make the background color of the div renatalAnnc have a blue background when we hover over it*/
.sidebarLink { color: #000000; text-decoration: none; }
.sidebarLink a:hover { background-color: blue; }
/* The following on works in Firefox not IE! :( #rentalAnnc:hover { background-color: blue; } */
-->
</style>
</head>
<body>
<a class="sidebarLink" href="facilitiesForHire.html">
<div id="rentalAnnc">
<p>We have a range of Education Facilities available for lease & hire</p>
</div>
</a>
</body>
</html>
:hover support is not great for non-anchor elements in older browsers and IE, so you can attach the hover psuedo class to the <a> instead and use a simple descendant selector:
a:hover #rentalAnnc { background-color: blue; }
You should put the <a> inside the <div>. If you want it to stretch across the full space, add display: block to its style.
<div id="rentalAnnc">
<a class="sidebarLink" href="facilitiesForHire.html">
<p>We have a range of Education Facilities available for lease and hire</p>
</a>
</div>
a.sidebarLink { color: #000000; text-decoration: none; display: block; }
a.sidebarLink:hover { background-color: blue; }
Add <!DOCTYPE html> to top of your page to make it a HTML5 document and use the outcommented #rentalAnnc:hover { background-color: blue; } rule. Having a <div> inside <a> is invalid in HTML3/4, but apparently valid in HTML5 (disclaimer: HTML5 standard is still not definitive). After adding the proper doctype and the outcommented rule, your current problem (and many other (future?) layout-related issues) should be solved in MSIE.
Don't forget to fix the other http://validator.w3.org errors after adding the doctype, such as a missing title and so on. Browser behaviour is undetermined on invalid HTML.
A bit late I'm sure but I've been looking at this recently and I think the better solution is:
<style type="text/css">
body { background-color: RGB(218,238,248); }
#rentalAnnc { margin-top: 5%; border-color: #99CCFF; padding-left: 10px; padding-right: 10px;
border-width:thin; border-style:solid; border-right-width:thick;
border-bottom-width:thick; width: 300px; }
a.sidebarLink div { color: #000000; text-decoration: none; background-color: #FFFFFF;}
a.sidebarLink:hover div { background-color: blue; }
</style>
<a class="sidebarLink" href="facilitiesForHire.html">
<div id="rentalAnnc">
<p>We have a range of Education Facilities available for lease & hire</p>
</div>
</a>
Note: the rentalAnnc div does not have a background-color in it's style. This is in the link style only.
This way, the link covers the entire div exactly, not just a part of it. Also, any background-image applied to the div (eg with transparent areas for the background color to show through) will still be displayed!
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I have a problem with my CSS. Here it is:
The CSS for Div main:
.main {background: #E6E6E6; padding: 2em; heigh:100%;}
The CSS for links:
a { color: #8D0D19; }
The HTML for main:
<div class="main">
<h3>Welcome</h3><br /> ...More Content Here....
<h3>New</h3>
The color for the link is burgundy. When a link is present on the page, the whole text on the page becomes burgundy.
I also added color attribute to .main but it didn't work. Also I tried making a, .main a but that also didn't work.
So what should i do to keep my text black and only the links burgundy?
BTW I dont know CSS very well. If you can reccomend me some website, training or book for beginning CSS, that would be great.
Thanks.
Update:
Heres the whole CSS code:
* { margin: 0; }
html { height: 100%; width: 100%; }
body { height: 100%; width: 100%; margin: 0; padding: 0; border: 0; background: #E6E6E6; font: 13px/15px Verdana,Arial,Helvetica,sans-serif; }
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -42px; }
.header { height: 70px; text-align: left; background: #1A446C; color: #D4E6F4; }
.header h1 { padding: 1em; margin: 0;} .header a {position: absolute; right:0; top: 0px; text-align: right; padding: 1.25em; margin: 0; color: >#D4E6F4; text-decoration:none;}
.main {color: #000000; background: #E6E6E6; padding: 2em; heigh:100%;} .main a {color: #8D0D19;}
.footer { height:10px; text-align: center; padding: 7px; background: #1A446C; color: #D4E6F4; position:absolute; bottom:0; right:0; left:0; }
img { border: none; }
table, tr, td, tr { border-collapse: collapse; vertical-align: top; text-align: left; font: 13px/15px Verdana,Arial,Helvetica,sans-serif; }
table.bordered tr th, table.bordered tr td { border: 1px solid #000000; }
And Here's the HTML Code:
<html> <head>
<link href="style.css" rel="stylesheet" type="text/css" /> </head> <body>
<div class="wrapper">
<div class="header">
<h1>Header</h1><h2><a href="login.php?logout=1">Logout<a/></h2>
</div>
<div class="main"><h3>HTML Text Here....</h3><br /><br /> <h3><a href="new.php" >New</a></h3> </div> </div> <div class="footer">
<p>Copyright © 2011</p>
</div> </body> </html>
Update: Test it here: http://jsfiddle.net/hhgGE/
Update:
The bug was caused by a typo in the .header <a/> closing tag - should have been </a>.
Here is a live link: http://jsfiddle.net/RF9cC/1/
Previous:
Sounds like the color is being inherited from somewhere else or your not closing the </a> tag properly? You could do something like:
.main{
color:#000;
}
.main a:link{
color:#8D0D19;
}
That should style all the text in the DIV .main as black but any link as the burgundy.
A good (and in-depth) reference to building websites is this e-book by Robert Schifreen:
http://www.the-web-book.com/browse/index.html
It has detailed information on pretty much all there is to know regarding web design.
From what little you've posted, I cant see anything that could be wrong with the css. I'd double check the html to make sure you're properly closing your tags.
EDIT : looking at your update, there's a closing a tag in there that looks like <a/> (line 5, the logout link). it should be </a>. This fixes the problem.
As for learning CSS, I can't go past W3 Schools. Basically tells you everything every CSS element does, what attributes they have, what browsers it works with, etc. And some nice tutorials, too.