Hi all,
I've been trying to make a header for a website I'm working on like the image above, the issue is I would like that the header fill 100% of the page width.
Is it possible to show me a way to do this in HTML5/CSS3 without using this image as a background img.
You need to create everything on 100%, fully flexible. Try the code given below DEMO
This is just to make you understand how you can do this.
CSS
body { background: #ccc; margin:0; padding: 0;}
header {background: #fff; width:100%; float:left; height:60px; position:relative;}
nav {background: red; height:30px; width:100%; float:left; margin-top: 30px;}
.logo {
position:absolute;
width:150px; height:80px; background: #fff;
border-radius: 0 0 3px 0; left:0; top:0;
}
.triangleDown { width: 0; height: 0; border-left: 50px solid transparent; border-right: 35px solid transparent; border-top: 81px solid #fff; left: 98px; position: absolute;}
HTML
<header>
<div class="logo"></div>
<div class="triangleDown"></div>
<nav></nav>
</header>
Salam my friend, the best idea is to use Css3 proprieties i mean the gradient role, i made a demo for you, you can costumize it as u need.
http://codepen.io/anon/pen/FBpEv
set the containing div to 100% and have a bg image of 1px wide and repeat the image. above this will sit the original main image with margin: 0 auto;
This will give you the desired result as above.
Try this, it has examples of what you want:
http://css-tricks.com/full-browser-width-bars/
You can use below code:
*{margin:0; padding:0;}
html, body{height:100%; width:100%;}
header{width:100%; background:#ccc;}
Related
I am new to table less layout, recently designed website in table layout. Now converting tabular layout to table less layout.I am using a background image for website. I am having problem in wrapper div, i am giving wrapper div a background color and a shadow but it is not applying. Guide me where i am going wrong
HTML:
<body>
<div id="wrapper">
</div>
</body>
CSS:
body
{
background-image:url(../images/site-bg-5.jpg);
}
#wrapper {
width: 950px;
height:1500px;
margin: 0 auto;
background-color: #FFF;
box-shadow: 0 0 10px #000;
border: 1px solid #000;
}
I am having problem the wrapper div has drop shadow and border but it is of a specific height. i want the shadow & border height to auto adjust the height of the wrapper div. Show a working fiddle the correct way to do this.
There is a space between the "#" and the word "wrapper". Remove it and it should work.
This should be the final css:
body{
background-image:url(../images/site-bg-5.jpg);
}
#wrapper {
width:950px;
margin:0 auto;
background-color:#FFF;
box-shadow: 0 0 10px #000;
border:1px solid #000;
}
#wrapper is correct
body {
background-image: url(../images/site-bg-5.jpg);
}
#wrapper {
width: 950px;
margin: 0 auto;
background-color: #FFF;
box-shadow: 0 0 10px #000;
border: 1px solid #000;
}
<body>
<div id="wrapper">
df
</div>
</body>
try this css
body{background-image:url(../images/site-bg-5.jpg); }
#wrapper{width:950px;margin:0 auto;background-color:#FFF;box-shadow: 0 0 10px #000;border:1px solid 000;}
delete space between # and wrapper and it will work
also add height
Here is working fiddle:Demo
See Demo here:See Demo
#wrapper {
width:950px;
margin:0 auto;
background-color:#FFF;
box-shadow: 0 0 10px #000;
border:1px solid #000;
}
I would like to know how can I make in CSS3 angled boxes. Like this site:
http://themeluxe.com/themes/glissando/ (the whites ones)
And how can I make the borders look better, smooth.
Looking on their code, I found this css:
.container:before, .container:after {
border-bottom: 80px solid transparent;
border-left: 110vw solid transparent;
content: "";
display: none;
height: 0;
margin-top: -80px;
position: relative;
width: 0;
}
But is not working for me.
In the website you link to they use the "border technique" to create the oblique boxes on pseudo elements you may understand this technique in this SO question.
Here is a simple fiddle using this technique to create the oblique bottom and top. It should help you understand how it works :
DEMO
HTML :
<div></div>
<div class="second"></div>
CSS :
body{
margin:0;
padding:0;
}
div{
height:200px;
background:teal;
position:relative;
}
.second{
background:gold;
}
.second:before{
content:'';
position:absolute;
bottom:100%;
border-left:100vw solid transparent;
border-bottom: 80px solid gold;
}
You should also be aware that in the website you link to, they are using vw units. They are not supported by IE8-
I seem to have a difficulty in putting the button i made in the center of the screen. Here's the source code.
View Products
Here are the styles
/*header button styles*/
a.header-button {
display: inline-block;
background-color:#
}
a.header-button:hover {
color: #e8ddc8;
text-decoration: underline;
}
.header-button {
background-color:#031634;
color:#e8ddc8;
padding: 10px 5px 10px 5px;
border-radius: 5px;
text-align:center;
}
You see, even though I put text-align:center in the .header-button, the button does not position itself at the center. (See image below)
Can anyone help me?
Try this. Working Fiddle
a.header-button {
display: block;
background-color:#;
margin:0 auto;
width:100px;
}
One solution: http://jsfiddle.net/xzY5j/
css:
.header-button {
background-color:#031634;
color:#e8ddc8;
padding: 10px 5px 10px 5px;
border-radius: 5px;
}
.container {
text-align:center;
width: 100%;
padding: 50px;
background-color:#ccc;
}
}
HTML
<div class="container">
View Products
</div>
Other suggestion is:
Binita Tamang solution she wrote it before I had a chance so I will let her get the credit for it :)
You should give the container or the parent element text-align:center
jsfiddle
HTML
<div class="parent">
View Products
</div>
CSS:
.parent{
text-align:center;
}
If you want to put a button or any element on middle of the screen,then use position absolute an give the top 50% and left 50% now,give margin just half of its width and height in minus :
Something like this :
CSS
button{
position:absolute;
top:50%;
left:50%;
width:100px;
height:30px;
margin:-15px 0 0 -50px;
}
And if only middle from left then :
button{
position:absolute;
top:some_top_in_px;
left:50%;
width:100px;
height:30px;
margin:0px 0 0 -50px;
}
Fiddle DEMO
Let me please say that I am very new at HTML/CSS so excuse my very sloppy code. Basically, all I want is a header with my name in it and then my nav bar on the top right. But when I resize the window, the nav bar is stuck to the top right and will overlap my heading. I just want it to stay put!
I'm not sure if this is enough information but I'll put my CSS code below. I've been trying for over an hour to get it to resize from the top left. I tried position:fixed / right:0px but nothing happens. If you guys can help I'll be forever grateful.
div#wrapper {
width: 98%;
margin: auto;
}
div.header {
background-color:black;
height: 80px;
width:100%;
position:fixed;
}
div.menu {
width:600px;
height:100px;
position:absolute;
right:0px;
margin-right:10px;
}
div.menu p {
display:inline-block;
float:right;
margin-top:0px;
}
div.menu a {
text-decoration: none;
display:block;
width: 100px;
padding: 30px 10px 29px 10px;
text-align:center;
margin-left: -5px;
color: black;
background-color:white;
font-family: Trajan Pro;
border-left: 1px solid black;
border-right: 1px solid black;
font-size:16px;
}
Thanks so much in advance!!
What I understood is this:
You want to resize the window, but you want your navigation bar not to be resized. If this is what you ask what you should do is simple.
Your current child-parent relation is like this (if I understood correctly)
<div id="wrapper">
<div id="menu"></div>
<div id="navigationbar"></div>
</div>
What you want is this:
<div id="wrapper">
<div id="menu"></div>
</div>
<div id="navigationbar"></div>
This way your navigation bar div won't be resized or won't change position. To make it stuck in top right here is the css code you need:
.navigationbar{position:absolute; top:0px; right:0px;}
If this does not solve your problem please explain how you resize or share a link here so we can understand easier.
I'll start by saying that my css skills are very weak.
Here is the site, and I was trying to add some margins to this background so I can see all the content. I now understand that I am not able to use margins on a background, so what are my options here?
Here is my HTML
<body>
<div id="container">
<nav id="navigation">
<ul>
<li>Homepage</li>
</ul>
</nav>
</div>
</body>
and here is my css
body {
background: url('images/prices.jpg');
min-height: 100%;
height: 100%;
}
#btn {
color: #FAF3BC;
background: #4FB69F url('images/texture.png') no-repeat right bottom;
padding: 15px 30px;
margin: 150px 0px;
border-top: 5px;
border-radius: 25px;
text-decoration: none;
text-transform: uppercase;
}
I am also having issues with the homepage button, I would like some room there as well, but I've tried couple of things like padding and margin and was not able to do it...
I would appreciate any help .... here is the page live, if you like to take a peak http://brewstahs.com/menu.html
I know why your css is not working. The most basic use of CSS is to create a layout, but even though your DOM contains div representing container and footer, the height occupied by each is
equal to the height of its content(because you have not provided any height to the div containers).In short,
margin : 150px 0px does not work because the parent container(nav) does not have that height to provide the margin to it. So provide a height to nav and div and it will work.
Use tools like Firebug to see your layout and see where you're going wrong.
All the best!!
Maybe you should try with background-position attribute:
http://www.w3.org/wiki/CSS/Properties/background-position
What do you want to do?
In case of moving the button, try
margin-top: 50px; for example in the css of btn. This way, the button is moved 50pixels to the bottom. Margin-left moves the button to right, ...
if you are trying to move the button down then you need to first put it in a wrapper
if not try this .
body {
background: url('images/prices.jpg');
min-height: 100%;
height: 100%;
}
#navigation {
position:relative;
display:block;
margin:40px 0px 0px 0px;
padding:0px;
width:auto;
height:auto;
}
#navigation ul {
display:block;
position:relative;
margin:auto;
padding:0px;
}
#navigation ul li {
list-style:none;
}
#btn {
color: #FAF3BC;
background: #4FB69F url('images/texture.png') no-repeat right bottom;
padding: 15px 30px;
margin: 150px 0px;
border-top: 5px;
border-radius: 25px;
text-decoration: none;
text-transform: uppercase;
}
and about your background you can try one thing. Have a looping background texture similar to the one you have right now with background-repeat:repeat; and then put the main background image above it with z-index and centered if required. Just to give you a simple example
body {
background-image:url('images/loop.jpg);
background-repeat:repeat;
}
#backgroundimg {
background-image:url('images/prices.jpg);
background-repeat:no-repeat;
display:block;
position:relative;
width:980px;
height:700px;
margin:auto;
padding:0px;
}
hope this helps :)