I am using a premium wordpress theme for a quick website I'm making. Almost everything can be set in the admin panel, which is great, but the header size is not one of them and I find it to be a bit large now. I'd like to use the 'custom css' section in the admin panel because I'm not interested in creating a whole child theme for just that one line of code.
I tried searching for the right class, something is making this thing so big, but what?
This is the url to the page I'm talking about;
http://lindenmobileappstore.nl/drsachs/
This is all the css regarding the header (that I could find at least);
/* 3.2. Header and subheader
==================================== */
#dp-head-wrap {background:transparent; position:relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
z-index:400;
}
.page-template-template-contact-php #dp-head-wrap.semi-transparent {
background-color: rgba(33, 51, 68, 0.9)!important;}
#dp-head {
position: relative;padding: 0 10px;
}
#dp-head:after {
clear: both;
content: "";
display: table;
}
#dp-head h1 {
float: left;
margin: 0;
}
#dp-head a.cssLogo {
background: transparent url('../images/logo.png') no-repeat 0 0;
display: block;
height: 42px;
width: 143px;
text-indent: -9999px;
margin: 30px 15px 10px 0;
background-size:cover;
}
#dp-head a.textLogo {
color: #5F8CB4;
display: block;
font-size: 18px;
line-height: 22px;
padding: 7px 0 0 10px;
}
#dp-head a.textLogo small {
color: #333;
display: block;
font-size: 12px;
line-height: 12px;
}
#dp-head a.imageLogo {
display: block;
width: 160px;
height:42px;
margin: 30px 15px 10px 0;
}
#dp-head a.imageLogo img {
display: block;
width: auto;
height: auto;
max-height: 100%;
height : 100%\9; /*hack: fixes ie8 logo*/
}
.dp-header-wrapper {
background-color: #232D37;
padding: 0;
color:#fff;
position:relative;
}
#dp-header {padding: 20px 0}
#dp-header .box {margin-bottom:0}
#dp-button-area {
float: right;
margin-left: 30px;
}
#dp-button-area a {
display: block;
float: right;
margin: 42px 0 0 0;
-webkit-transition: background-color .3s ease-out;
-moz-transition: background-color .3s ease-out;
-ms-transition: background-color .3s ease-out;
transition: background-color .3s ease-out;
width:25px;
height:25px;
text-align:center;
vertical-align:middle;
color: #2d3e52;
}
#dp-header-search, #dp-logout, #dp-login {
color: #2d3e52;
font-size:18px;
display:block;
line-height:18px;
}
#dp-header-search:hover, #dp-login:hover, #dp-logout:hover {color:#5F8CB4;}
#dp-header-search-form {width:100%;
height:100%;
position:absolute;
top:0;
display:none;
background:#ffffff;
z-index:1000;}
#dp-header-search-form .dp-page {padding:50px 10px 0 10px}
#dp-header-search-form #s {
width:95%;
border:none;line-height:36pxpx;
font-size: 36px;
height:50px!important;
font-weight: 300;
color: #b9bec3;
letter-spacing: 0px;
float:left;
padding:7px 0;
background:transparent;
}
#cancel-search {float:right; width:40px; height:40px;
cursor:pointer;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;color:#b9bec3 }
#cancel-search i {font-size:40px; text-align: center;line-height:40px;}
#cancel-search:hover {
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
.dp-subheader-wraper {
background: #213344;
padding: 0;
}
.dp-subheader {position:relative; height:120px;}
.dp-subheader .main-title {margin:0; padding:25px 0 0 10px; font-size:36px;font-weight:100;line-height:40px}
.dp-subheader .sub-title {margin:0; padding:0 0 0 10px; font-size:13px; font-weight:400; opacity:0.7;}
.dp-subheader .dp-breadcrumbs {position:absolute;right:15px;top:45px;font-size:13px;}
.dp-subheader .dp-breadcrumbs a, .dp-subheader .dp-breadcrumbs span {opacity:0.7}
.dp-subheader .dp-breadcrumbs a:hover {opacity:1}
.sf-menu li {
height: 100px;
}
Remove menu item height and overall height will be based on logo image.
Hi my problem is that I actually can't center my div!
it's always stuck on the left. I already tried the margin-left: auto; and margin-right: auto;, but it doen't seems to work.
Here's the HTML:
<ul class="menu">
<li>Acceuil</li>
<li>LoL
<ul>
<li><a><span class="headlist">League of Legends</a></li>
<li>Funny games</li>
<li>Favorite builds</li>
<li>...</li>
</ul>
</li>
<li>SSF2
<ul>
<li><a><span class="headlist">Super Smash Flash 2</a>
<li>Intro</li>
<li>Events</li>
<li>Challenges</li>
</ul>
</li>
<li>RotMG</li>
<li>GMod</li>
<li>Contact</li>
</ul>
<div>
<p>
HUEHUEHUEHUEHUEHUEHUE
</p>
</div>
And here's the css:
html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* div */
div
{
text-align: center;
border-radius: 0 0 5px 5px;
width: 590px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-color: rgba(140,0,0,0.7);
margin-left: auto;
margin-right: auto;
text-shadow: 1px 1px 1px rgba(0,0,0,.5);
color: #f3f3f3;
font-family: Helvetica, Arial, sans-serif;
display: block;
position: absolute;
top: 38px;
left: 25%;
z-index: -50;
margin-left: auto;
margin-right: auto;
}
/* Reset de la liste (aucun style, etc.) */
.menu,
.menu ul,
.menu li,
.menu a,
.menu p
{
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* Menu */
.menu
{
height: 40px;
width: 610px; /* Longueur du menu */
background: #760101; /* couleur du gradient */
background: -moz-linear-gradient(#D20202, #760101);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #760101),color-stop(1, #D20202));
background: -webkit-linear-gradient(#D20202, #760101);
background: -o-linear-gradient(#D20202, #760101);
background: -ms-linear-gradient(#D20202, #760101);
background: linear-gradient(#D20202, #760101);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 13px;
display: block;
margin-left: auto;
margin-right: auto;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.menu li a {
display: block;
padding: 0 7px 0 40px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #4B0101;
border-right: 1px solid #5C0101;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #FF9900; }
/* Sub-menu */
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #D20202;
background: -moz-linear-gradient(#760101, #D20202);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #D20202),color-stop(1, #760101));
background: -webkit-linear-gradient(#760101, #D20202);
background: -o-linear-gradient(#760101, #D20202);
background: -ms-linear-gradient(#760101, #D20202);
background: linear-gradient(#760101, #D20202);
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 145px;
padding: 4px 0 4px 10px;
margin: 0;
border: none;
border-bottom: 1px solid #4B0101;
}
.menu ul li:last-child a {
border: none;
}
.LoL
{
background: url(LoLicon.png) no-repeat 6px center;
}
.home
{
background: url(home.png) no-repeat 6px center;
}
.ssf2
{
background: url(SSF2.png) no-repeat 6px center;
}
.contact
{
background: url(contact.png) no-repeat 6px center;
}
.headlist
{
color:#ff9900;
}
.menu ul li:first-child a {
border-bottom: 3px solid #4B0101;
}
It's been 2 hours I'm searching so please help! :O
Margin: 0 auto; will not work with absolute positioning. Try removing position:absolute from the div and then it should work.
Here is the fiddle
If it must be absolutely positioned (thus meaning margin: auto won't work), then you can change the CSS to left: 50% and add margin-left: -295px;.
This will move the <div> 50% from the left, and then negatively bring it back by half of it's width, this leaving it in the middle.
http://jsbin.com/iJESEwe/1/edit?html,css,output
How do I stop the text in my webpage from breaking to the next line. Its a navigation bar.
I tried both: 'whitespace: nowrap;' and 'overflow: hidden;' which gives me this result:
. The text doesn't break to the next line, but the drop down menus don't work and the text 'Arc Studios' is cut off on the top and bottom.
How do I stop the text from breaking to the next line, while still keeping all of the functions (drop-down menus, and the 'Arc Studios' text)?
CSS
p {
text-align: justify;
color: #000000;
text-indent:5px;
}
body {
background: #f5f5f5;
background-image: url('brushed.png');
}
footer {
background: rgb(63,76,107); /* Old browsers */
background: -moz-linear-gradient(top, rgba(63,76,107,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(63,76,107,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
box-shadow: 0px 1px 3px #000000;
border-radius: 0px;
text-indent: 5px;
position: absolute; right: 0; left: 0;
margin-top: 100px;
}
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
overflow: hidden;
white-space: nowrap;
}
.menu {
margin-top: -8px;
height: 50px;
width: 100%;
position: absolute; right: 0; left: 0;
text-align: left;
background: rgb(63,76,107); /* Old browsers */
background: -moz-linear-gradient(top, rgba(63,76,107,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(63,76,107,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
box-shadow: 0px 1px 3px #000000;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.menu li a { /* Navigation Bar text */
display: block;
padding: 0 20px;
margin: 15px 0;
line-height: 15px;
text-decoration: none;
font-family: sans-serif;
font-weight: bold;
font-size: 12px;
color: red;
/* text-shadow: 1px 1px 1px rgba(255,255,255,0.3); */
-webkit-transition: color .4s ease-in-out;
-moz-transition: color .4s ease-in-out;
-o-transition: color .4s ease-in-out;
-ms-transition: color .4s ease-in-out;
transition: color .4s ease-in-out;
}
.menu li:first-child a{ border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { text-decoration: underline; }
.menu li#navbar-logo:hover > a { text-decoration: none; }
.menu ul {
position: absolute;
top: 35px;
left: 0;
opacity: 0;
background: rgba(63,76,107,1);
border-left: 1px solid #393942;
border-bottom: 1px solid #393942;
border-right: 1px solid #393942;
-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
-webkit-transition: opacity .75s ease .1s;
-moz-transition: opacity .75s ease .1s;
-o-transition: opacity .75s ease .1s;
-ms-transition: opacity .75s ease .1s;
transition: opacity .75s ease .1s;
}
.menu li:hover > ul {
opacity: 1;
}
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 35px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 100px;
padding: 10px 0 10px 10px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a {
border: none;
}
.menu li#navbar-logo,
.menu li#navbar-about,
.menu li#navbar-shop,
.menu li#navbar-contact,
.menu li#navbar-community {
margin-top: 5px;
}
.menu li#navbar-logo {
margin-top: 3px;
}
.menu li#navbar-logo,
.menu li#navbar-about,
.menu li#navbar-shop,
.menu li#navbar-contact,
.menu li#navbar-community {
margin-left: -13px;
margin-right: 5px;
}
.menu li#navbar-about,
.menu li#navbar-shop,
.menu li#navbar-contact,
.menu li#navbar-community {
margin-left: 5px;
margin-right: 5px;
}
#navbar-logo a{
color: #FFC8C8;
text-shadow: 2px 2px 2px rgba(255, 0, 0, 1);
font-size: 50px;
font-family: Intrique Script Personal Use;
}
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title of Webpage</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<nav class="navbar">
<ul class="menu">
<li id="navbar-logo">Arc Studios</li>
<li id="navbar-about">About Us
<ul>
<li>FAQ's</li>
<li>Our Inception</li>
<li>Locations</li>
</ul>
</li>
<li id="navbar-shop">Store
<ul>
<li>Games</li>
<li>OS's</li>
<li>Other</li>
</ul>
</li>
<li id="navbar-contact">Contact
<ul>
<li>Email</li>
<li>Help Centre</li>
</ul>
</li>
<li id="navbar-community">Community
<ul>
<li>Forums</li>
<li>Events</li>
</ul>
</li>
</ul>
</nav>
</header>
<br></br>
<footer class="footer">
<p><small>© Copyright 2013, All rights reserved</small></p>
</footer>
</body>
</html>
I'm new to HTML, excuse me.
You would need to decrease the padding in the .menu li a style as they are still block type elements, and specifying white-space: nowrap; will not make a difference, because the menu items are split between the li's.
Remove the overflow:hidden; to show the entire logo.
As for the wrapping, if you don't want any collapsing, you need to set a min-width or a fixed width on ul.menu.
Otherwise, you could use media queries to adjust the sizing of the menu links at certain breakpoints.
I am trying to extend my header to cover the full page. http://dev.webgrowth.biz/ and I want it look like this one http://www.webgrowth.biz/ I have been trying everything for hours now. any help would be highly appreciated.
Live Demo
You can achieve the effect using a container element, then just set the containing elements margin to 0 auto and it will be centered.
Markup
<div id="header">
<div id="headerContent">
Header text
</div>
</div>
CSS
#header{
width:100%;
background: url(yourimage);
}
#headerContent{
margin: 0 auto; width: 960px;
}
Just set the header width to be 100vw to make it full screen width
and set the header height to be 100vh to make it full screen height
#header {
margin: 0;
padding: 0;
width: 100%;
background: xxxx;
}
#header #content {
margin: 0px auto;
width: 800px; /* or whatever */
}
<div id="header">
<div id="content">
stuff here
</div>
</div>
Set the max-width:1250px; that is currently on your body on your #container. This way your header will be 100% of his parent (body) :)
The best way to make the header full screen is set height to be 100vh
#header{
height: 100vh;
}
min-height: 100%;
position: relative;
set the body max-width:110%;
and the make the width on the header 110% it will leave a small margin on left that you can fiX with margin-left: -8px;
margin-top: -10px;
Remove the max-width from the body, and put it to the #container.
So, instead of:
body {
max-width:1250px;
}
You should have:
#container {
max-width:1250px;
}
just do
#RandomDiv{
width: 100%;
}
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>
<ul class="menu">
<li>My Dashboard
<ul>
<li>Learn</li>
<li>Teach</li>
<li>My Library</li>
</ul>
</li>
<li>Likes
<ul>
<li>Pictures</li>
<li>Audio</li>
<li>Videos</li>
</ul>
</li>
<li>Views
<ul>
<li>Documents</li>
<li>Messages</li>
<li>Videos</li>
</ul>
</li>
<li>account
<ul>
<li>Sign In</li>
<li>Register</li>
<li>Deactivate</li>
</ul>
</li>
<li>Uploads
<ul>
<li>Pictures</li>
<li>Audio</li>
<li>Videos</li>
</ul>
</li>
<li>Videos
<ul>
<li>Add</li>
<li>Delete</li>
</ul>
</li>
<li>Documents
<ul>
<li>Upload</li>
<li>Download</li>
</ul>
</li>
</ul>
</body>
</html>
css:
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
body{
max-width:110%;
margin-left:0;
}
.menu {
height: 40px;
width:110%;
margin-left:-4px;
margin-top:-10px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.menu li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #8fde62; }
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a { border: none; }
demo here
try also resizing the browser tab to see it in action