I've searched everywhere for this but I haven't found anything (maybe because I don't know exactly how to put it into words). I'm a newbie with HTML and CSS.
What I basically have is a wrapper, nav, logo, content and footer. I added a fixed background image to the body and made my divs semi transparent. My divs have a fixed width of about 1152px, margin auto and a semi transparent background color that covers the background image.
What I want to do is to make the divs transparent background color to extend to the sides, covering the full width of the screen but keeping all the content in a fixed width.
Here is an example of what I want to do:
http://electricladystudios.com/
The content, nav bar, logo, it's all centered in a specific width, but the backgrounds go beyond that width.
This is my HTML body:
<body>
<div id="wrapper">
<div id="logo"> <img src="logo.png"></div>
<div id="nav">
<ul id="navbar">
<li>HOME</li>
<li>ABOUT</li>
<li>STUDIO</li>
<li>GALLERY</li>
<li>DEMOS</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div id="content">
<h1>Something </h1>
</div>
<div id=footer>
<p>WEBPAGE MADE BY ME lol</a></p>
</div>
</body>
And this is my CSS (I know there are a lot of things repeated in here, but this is my first try at coding by myself and I'm just trying to get everything to look right before I optimize the code) So please, bear with me.
#charset "utf-8";
/* CSS Document */
body {
background-image:url(bg2.jpg);
background-repeat: no-repeat;
background-position:center center;
background-attachment:fixed;
color: white;
font-family: Arial;
font-size: 1 em;}
#wrapper {
width: 1152px;
background: rgba(0, 0, 0, 0.8);
margin: auto;
margin-top: 20px;
padding: 30px;
height: 100px;
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75); }
#logo {
display: inline-block;
width: 40%;
float: left; }
#nav {
width: 52%;
display: inline-block;
text-align: right;
float: right;
padding: 20px;
margin-top: 5px;
margin-bottom: 75px;}
#navbar li {
font-size: 12px;
display:inline;
padding: 12px; }
#navbar li a {
text-decoration: none;
color: white;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s; }
#navbar li a:hover {
color: #0062A4;
transition: .5s; }
a {
text-decoration: none;
color: #0062A4;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;}
a:hover {
color: #C33;
transition: .5s; }
#content {
clear:both;
width: 1152px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 30px;
height: 800px;
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);
background: rgba(240, 240, 240, 0.6);
color: #333;
font-family: Arial;}
#footer {
width: 1152px;
background: rgba(0, 0, 0, 0.8);
text-align: right;
color: grey;
margin:auto;
padding:5px;
padding-left: 30px;
padding-right: 30px;
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);
font-size: 75%; }
Any help will be greatly appreciated!
Thanks
I managed to do it. This is the method I used:
I applied margin 0 to the body so as to remove any borders imposed to the rest of the divs.
Then I wrapped all my divs around another div and gave that parent div a width of 100% and the transparent background color and then specified the width of the content on the child div.
Result is, semi transparent black background takes the full width of the page while the content stays inside that same div but with a fixed width.
Like so:
#outwrap {
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);
background: rgba(240, 240, 240, 0.6);
width: 100%; }
#content {
width: 1152px;
margin: auto;
padding: 30px;
color: #333;
font-family: Arial; }
Heres a quick demo on jsfiddle:
http://jsfiddle.net/Dasch/fK5aB/
The way they do the fixed background is this:
background: url(images/Hero.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
body {
background-image:url(bg2.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
color: white;
font-family: Arial;
font-size: 1 em;}
add
background-size:100% 100%;
and remove
background-position:center center;
Related
I don't want the large box to move when the buttons at the top move. The box will contain text, but on the hover of the buttons, the box moves. Any way to fix this? Code I use below:
<html>
<title>Website</title>
<head>
<style>
body {
background: url(bg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.button {
float: left;
top: 100px;
text-decoration:none;
text-align:center;
color: #000000;
text-shadow: 0 2px 2px #333333;
font-family: "Comic Sans MS", cursive, sans-serif;
border-radius: 8px;
padding:35px 32px;
background: url("pic.png");
background-repeat: no-repeat;
transition: all ease-in-out 250ms;
}
.button:hover {
float: left;
top: 100px;
text-decoration:none;
text-align:center;
padding:68px 32px;
font-family: "Comic Sans MS", cursive, sans-serif;
border:none;
display: block;
}
.b-pos {
margin-top:50px;
margin-left:34%;
}
.box {
float: left;
top: 100px;
text-decoration:none;
text-align:center;
color: #000000;
text-shadow: 0 2px 2px #333333;
font-family: "Comic Sans MS", cursive, sans-serif;
border-radius: 8px;
margin-left: 80px;
margin-top: 190px;
width: 1000px;
height: 500px;
background-repeat: no-repeat;
transition: all ease-in-out 250ms;
box-shadow: 0 8px 8px -6px black, 0 -8px 8px -6px black, -8px 0 8px -6px black, inset 0px 0px 10px 0px #000000;
}
</style>
</head>
<body>
<div class="b-pos">
Home
Sales
About
</div>
<div class="box">
</div>
</body>
</html>
All the code that is needed is above. I don't think the background is needed.
You need to take either the buttons or the box out of the normal flow of HTML. You can do this by setting the CSS position attribute of, for example .box to absolute or fixed.
.box {
position: absolute;
}
This will "lock" the box in place.
Just add: position:fixed;
in the box css and it will not move.
The fixed attribute means that the element is positioned relative to the browser window. Hence it will stay where it is irrespective of the above movement when the button is hovered upon.
Also you can use position:absolute here. Absolute means the element is positioned relative to its first positioned (not static) ancestor element.
Hello awesome programmers,
I have been struggling greatly with CSS for some time now. I have an issue when resizing a window, some of my divs begin to collapse down the page. (As shown)
Before:
before http://411metrics.com/pics/before.PNG
After:
before http://411metrics.com/pics/after.PNG
I have tried setting the min-width to 100% on various divs and also tried setting the overflow to hidden.
Does anyone have any suggestions as to how to fix this?
My HTML:
<div id="navigation">
<div id="branding-logo"><img src="/Portal/images/sharktek-logo.png" width="35" height="35"></div>
<div id="branding">Sharktek Tracking</div>
<div id="link-wrap">
<div id="active-nav">Dashboard</div>
Reports
Call Logs
Manage Campaigns';
</div>
<div id="nav-user">
Welcome<br>
Account Settings
Logout
</div>
</div>
<div id="nav-accent"></div>
My CSS:
#navigation {
z-index:3;
position: fixed;
top: 0;
width: 100%;
min-width:100%;
color: #ffffff;
height: 60px;
text-align: center;
/* Adds the transparent background */
background-color: rgba(22, 29, 37,1);
color: rgba(1, 172, 237, 1);
}
#navigation a {
float:left;
font-size: 14px;
padding: 25px 25px 0 25px;
color: white;
text-decoration: none;
}
#link-wrap {
float: left;
overflow: hidden;
margin-left: 15%;
}
#active-nav{
z-index: 2;
float:left;
color:white;
height: 60px;
background: -webkit-linear-gradient(#346c83, rgba(1, 172, 237, 1)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#346c83, rgba(1, 172, 237, 1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#346c83, rgba(1, 172, 237, 1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(#346c83, rgba(1, 172, 237, 1)); /* Standard syntax */
}
#active-nav a:hover {
color:white;
}
#navigation a:hover {
color: grey;
}
#branding-logo {
margin-top: 15px;
margin-left: 10px;
float: left;
}
#branding{
margin-top: 20px;
margin-left: 10px;
font-size:1.4em;
color: white;
float: left;
padding: 0px;
}
#nav-accent {
z-index:2;
position: fixed;
top: 60px;
width: 100%;
color: #ffffff;
height: 2px;
padding-top: 1px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 172, 237, 0.95);
color: rgba(1, 172, 237, 1);
}
#nav-user {
color: white;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 15px 30px 0 0;
font-size: .8em;
float:right;
}
#nav-user a{
margin: 0;
padding: 0 0 0 10px;
font-size:.8em;
}
I have had similar problems until I started to understand and apply absolute positioning. i.e. positioning relative the div you are in.
For absolute positioning the parent div must be set to relative positioning and after that you fix your inner elements to whatever side you like without having the browser take over the flow control.
e.g. in your case, with ...
#link-wrap {
position: absolute;
width: 500px;
/* ... the rest */
}
... your nav links will stop jumping all over the page. I made a few more tweaks in this fiddle http://jsfiddle.net/xb9cdu34/2/ .
This is my website. The nav bar is causing me horrendous problems. Last night my friend told me it was dropping down and I just don't know how to fix it:
http://i60.tinypic.com/23iigpi.png
So I removed the width and reduced the text on some buttons which is depressing for me.
Anyway, now I want my smaller nav bar to centre in the middle of my white block. Does anyone know the best way?
http://www.simplypsychics.com/null/index-test.html
I have tried:
and modifying various positioning in the CSS but nothing seems to work.
This is my CSS for the nav:
#nav {
position: absolute;
top: 98px;
left:15px;
float: left;
list-style: none;
background-image:url(../images/menubanner.png);
background-color: #f5c3fd;
border-radius:7px;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 1px 3px 1px rgba(0, 0, 0, 0.05);
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 13px;
text-decoration: none;
font-weight: bold;
color: #494949;
border-right: 1px solid #fceaff;
}
#nav li a:hover {
color: #822e8e;
}
#nav .home-icon1 {
background: url(../images/icon-home.png) no-repeat center;
width: 39px;
height: 34px;
background-color: #494949;
color: #f5c3fd;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
position: relative;
border-right: 1px solid #fceaff;
float: left;
padding: 0;
list-style: none;
}
#nav .home-icon1 a:hover {
background: url(../images/icon-home.png) no-repeat center;
width: 39px;
height: 34px;
background-color: #494949;
color: #f5c3fd;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
position: relative;
border-right: 1px solid #fceaff;
float: left;
padding: 0;
list-style: none;
}
#nav .home-icon2 {
background: url(../images/icon-findapsychic.png) no-repeat left;
padding: 0px 0px 0px 15px;
}
#nav .home-icon3 {
background: url(../images/icon-psychicreadings.png) no-repeat left;
padding: 0px 0px 0px 25px;
}
#nav .home-icon4 {
background: url(../images/icon-bookareading.png) no-repeat left;
padding: 0px 0px 0px 22px;
}
#nav .home-icon5 {
background: url(../images/icon-aboutus.png) no-repeat left;
padding: 0px 0px 0px 30px;
}
#nav .home-icon6 {
background: url(../images/icon-help.png) no-repeat left;
padding: 0px 0px 0px 14px;
}
and this is my HTML:
<div id="nav" style="margin:0 auto !important;">
<li class="home-icon1" onclick="window.location.href='http://www.simplypsychics.com/'"></li>
<li class="home-icon2">FIND A PSYCHIC READER</li>
<li class="home-icon3">PSYCHIC READINGS</li>
<li class="home-icon4">BOOK A READING</li>
<li class="home-icon5">FIND OUT MORE</li>
<li class="home-icon6">HELP/FAQ</li>
</div>
Also if the nav bar looks awful for you like it did my friend please let me know! :(
On parent (#headerwhiteback) set:
text-align: center;
Then on #nav, remove:
position: absolute;
float: left;
And add this CSS:
#nav {
display: inline-block;
}
#nav::before {
content: "";
clear: both;
}
Also, to your liking: add margin-top: on #nav (25px seems ok) and make padding-top: on next element, #headertextbottom, much smaller (20px seems ok).
This is just a quick fix for your header. Please remember: CSS looks horrific here and looks set to be rewritten from scratch or only cause you more and more trouble. Good luck!
If the nav bar is more-or-less a set width (#nav looks to stay at 840px) then you can set left:50% and margin-left:-420px (-420 px because it's half the width of the navbar, and we want to move it towards the left). This should work because you've already set the navbar to be positioned absolutely.
You'll have to remove this from the #nav div though: style="margin:0 auto !important;"
Inline style and !important is doubly bad!
So, I have this made.
HTML
<div id="navholder" class="bgd">
<nav id="nav">
<ul>
<li>Почетна</li>
<li>Делатност</li>
<li>Историјат</li>
<li>Службе</li>
<li>Колектив</li>
<li>Контакт</li>
</ul>
</nav>
</div>
#navholder {
height: 60px;
text-align: center;
margin: 0 auto;
}
#nav {
height: 30px;
margin-top: 10px;
background: #B8860B;
}
#nav ul li{
margin-top: 3px;
display: inline;
font-size: 120%;
opacity: 1.0;
}
#nav ul li a {
display: inline-block;
height: 120%;
padding: 5px;
-webkit-box-shadow: -1px 0px 22px rgba(50, 50, 50, 0.5);
-moz-box-shadow: -1px 0px 22px rgba(50, 50, 50, 0.5);
box-shadow: -1px 0px 22px rgba(50, 50, 50, 0.5);
border: 1px solid white;
opacity: 1.0;
background: #DAA520;
}
#nav a:hover {
color: white;
background: black;
width: ?
}
I want the buttons once hovered over with a mouse to increase about 20%. The problem that I found is if I use the exact width like "width: 60px not every button is of the same size.
On the other hand if I use width: 120% I believe the page takes the width of the whole #navholder element which is defined by the class .bgd.
Any ideas on how can I make this happen?
Thanks.
You could use transform: scale()
jsFiddle example
#nav a:hover {
transform:scale(1.3,1.3);
-webkit-transform:scale(1.3,1.3);
-moz-transform:scale(1.3,1.3);
}
Just increase the padding on hover:
#nav a:hover {
color: white;
background: black;
padding: 5px 10px; /* 5px top/bottom, 10px left/right */
}
You may set width with em's and increase font-size.
Also, you may add border/padding on hover:
#nav a:hover {
border-right: solid 20px black;
/* or padding-right */
}
Hi im just starting out and i have a small problem, for some reason i cant get the header and the menuholder to align, the menuholder appears slightly below the header, i need it to be inside the header
#header {
max-height: 50px;
width: 100%;
background: url(../img/bgpattern.png) repeat-x;
position: fixed;
box-shadow: 0px 0px 10px 5px rgb(139, 141, 143);
z-index: 5;
}
#menuholder {
height:50px;
width: 900px;
margin-right: auto;
margin-left: auto;
}
thanks for any feedback.
Is this what you have in mind?
<div id="header">
<div id="menuholder">
This is my menu
</div>
</div>
#header {
max-height: 50px;
width: 100%;
background: url(../img/bgpattern.png) repeat-x;
box-shadow: 0px 0px 10px 5px rgb(139, 141, 143);
}
#menuholder {
text-align: center;
padding: 15px 0;
margin: 0 auto;
}