#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    3
    Rep Power
    0

    A simple css problem: need more space for header


    Helloes!

    I've been trying to get my new blog up and running and it's gone quite well apart from this one problem.

    I am new to all this coding so this might be a really simple thing but a newbie is a newbie.

    Here's my blog: afilmodyssey[dot]com (sorry I couldn't make it a link but it wouldn't let me because this is my first post here.)

    As you can see the header image that comes with the theme fits perfectly to the space above the slider and menu but I've made a header of my own that is much bigger so it needs more space.

    If I try just to add the new image, it goes over the menu and the slider so I need to move everything down a bit to fit my header but I didn't find the location in the css code which I'm supposed to change.

    Here's my style.css:

    Code:
    /*	-==========================- GENERAL -==========================-  */
    /*------------------------------ PAGE ------------------------------*/
    @import url(css/font.css);
    
    html {
    	background:url(images/background.jpg)
    }
    body {	
    	color:#252525;
    	position:relative;
    }
    a {
    	color:#BF6F12;
    }
    a:hover {
    	color:#000;
    }
    a.post_ttl, .post-caption h1 {
    	color:#201107;
    	font-size:18px;
    	font-family:'oswald';
    }
    h2 a.post_ttl:hover{
    	color:#BF6F12;
    }
    
    
    
    /*------------------------------ HEADER ------------------------------*/
    #header .container{
    	position:relative;
    }
    #secondarymenu-container {
    	position:relative;
    }
    #header-block{
    	background:url(images/header.png) center repeat-y;
    }
    
    /*------------------------------ SEARCH ------------------------------*/
    #s {
    	background:none;
    	border:none;
    	float:left;
    	height:23px;
    	line-height:25px;
    	color:#C4C0B9;
    }
    .searchbtn {
    	height:25px;
    	width:17px;
    	margin-right:15px;
    }
    .searchform {
    	height:25px;
    	padding:7px 0;
    	width:260px;
    	background:url(images/back-search.png) no-repeat center;
    	margin:0;
    }
    
    /*------------------------------ CONTENT ------------------------------*/
    .one-post{
    	background:url(images/post.png) no-repeat bottom;
    }
    #commentform #submit, input.readmore, a.readmore {
    	background:url(images/readmore.png) no-repeat center;
    	padding:11px 31px;
    	border:none;
    	color:#fff;
    }
    #commentform #submit:hover, input.readmore:hover, a.readmore:hover {
    	color:#fff;
    	text-decoration:underline;
    }
    .featured_image {
    	margin-top:15px;	
    	padding:4px;
    	border:1px solid #efefef;
    	box-shadow:0 2px 3px #DDDDDD;
    }
    .googlemap {
    	padding:4px;
    	border:1px solid #efefef;
    	box-shadow:0 2px 3px #DDDDDD;
    }
    .widget_posts ul li img,.widget_flickr a {
    	padding:2px;
    	border:1px solid #efefef;
    	box-shadow:0 2px 3px #DDDDDD;
    }
    .pagination{
    	margin:30px 0;
    }
    .pagination.classic {
    	padding-top:30px;
    	text-align:left;
    }
    .page-numbers {
    	padding:5px 10px;
    	font-family: 'Arial';
    	border-radius:4px;
    	-webkit-border-radius:4px;
    	-moz-border-radius:4px;
    }
    a.page-numbers {
    	color:#444;
    	background:#ececec;
    	background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(225,225,225,1) 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,248,248,1)), color-stop(100%,rgba(225,225,225,1))); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(225,225,225,1) 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(225,225,225,1) 100%); /* Opera11.10+ */
    	background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(225,225,225,1) 100%); /* IE10+ */
    	background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(225,225,225,1) 100%); /* W3C */
    	text-decoration:underline;
    }
    a.page-numbers:hover, span.page-numbers {
    	background:#1D1711;
    	color:#fff;
    }
     
    
    /*------------------------------ FOOTER ------------------------------*/
    #footer  {
    	color:#fff;
    	background:url(images/footer-top.png) top center no-repeat;
    	margin-top:30px;
    }
    
    #footer .inner a{
    	color:#fff;
    }
    
    #footer h3{}
    
    #footer .container.clearfix {
    	background:url(images/footer.png) repeat-y center;
    }
    
    .footer_txt {
    	background:url(images/footer-top.png) top center no-repeat;
    }
    .footer_txt a{
    	color:#fff;
    }
    #footer .footer_txt .container {
    }
    .footer-widgets {
    }
    /*------------------------------ WIDGETS AND SLIDER ------------------------------*/
    .content-r .sidebar.right, .content-lr .sidebar.right, .content-r2 .sidebar.left, .content-r2 .sidebar.right {
    	margin-left:1px;
    }
    .content-l .sidebar.left, .content-lr .sidebar.left, .content-l2 .sidebar.left, .content-l2 .sidebar.right{
    	margin-right:1px;
    }
    #content .widget{
    	background:url(images/widget.png) bottom no-repeat;
    }
    .sidebar{
    	width:282px !important;
    }
    .tabs_captions .scaption{
    	background:none;
    	color:#444;
    	padding:8px !important;
    	margin:3px;
    	margin-bottom:10px;
    	cursor:pointer;
    	-webkit-border-radius:5px;
    	-moz-border-radius:5px;
    	border-radius:5px;
    	border:1px solid #bcbcbc !important;
    }
    .scaption.active, .scaption:hover{
    	box-shadow:0px 2px 3px #ccc;
    	color:#fff;
    	background:#000;
    }
    #content .widget{
    	padding:15px ;
    }
    #content .widget_banners{
    	padding:0 5px; 
    }
    #content .widget .caption h3 {
    	color:#201107;
    	font-size:22px;
    	font-family:'oswald';
    }
    #content .widget {
    	
    }
    .fp-next{
    	background-position:left 50%;
    	width:27px;
    }
    .fp-prev {
    	background-position:right 50%;
    	width:27px;
    	
    }
    	
    /*	-==========================- DESKTOP -==========================-  */
    @media only screen and (min-width:1024px) {
    	#content {
    		
    	}
    	#content .container {
    		width:980px;
    		padding:0 10px;
    	}
    	#logo {
    		position:absolute;
    		left:0;
    		right:0;
    		text-align:center;
    		top:128px;
    	}
    	.menusearch {
    		position:relative;
    		top:30px;
    	}
    	/*------------------------------ MENU ------------------------------*/
    	#secondarymenu-container {
    		height:100px;
    		padding-bottom:46px;
    		background:url(images/top.png) bottom no-repeat;
    		position:relative;
    		z-index:11;
    	}
    	
    	
    	#secondarymenu {
    		float:left;
    		background:url(images/secondarymenu.png) repeat-x center;
    		margin-top:30px;
    	}
    	#secondarymenu a {
    		padding:11px 9px;
    		color:#C4C0B9;
    	}
    	#secondarymenu a:hover{
    		color:#fff;
    	}
    	#header-block {
    		position:relative;
    		padding:50px 0;
    	}
    	
    	#mainmenu-container {
    		height:71px;
    		background:url(images/mainmenu.png) no-repeat center;
    		margin:0 auto 10px;
    		z-index:18;
    		padding:10px 92px;
    	}
    	#mainmenu li a {
    		padding:23px 20px;
    		font-size:15px;
    		color:#fff;
    		font-family:'oswald';
    	}
    	#mainmenu li {
    		position:relative;
    	}
    	#mainmenu li a:hover{
    		background:url(images/li.png) left no-repeat;
    	}
    
    
    	#header li ul {	top:36px; background:#000; }
    	#header #mainmenu li ul { top:57px; background:#000; }
    	
    	#header li ul .transparent {
    		background:url(images/popup-left.png) left top repeat-y;
    	}
    	#header li ul .inner { 
    		background:url(images/popup-right.png) right top repeat-y;
    	}
    	#header #mainmenu li ul .transparent {	}
    	#header #mainmenu li ul .inner {	}
    	
    	#header ul.children li a, #header .sub-menu li a {
    		color:#fff; 
    		padding:0;
    	}
    	#header ul.children li a:hover, #header .sub-menu li a:hover {
    		color:#fff !important;
    		background:url(images/li.png) 5px center no-repeat;
    	}
    	
    	#header #mainmenu ul.children li a, #header #mainmenu .sub-menu li a {}
    	#header #mainmenu ul.children li a:hover, #header #mainmenu .sub-menu li a:hover {		
    		color:#df191b;
    	}
    	
    	/*------------------------------ SLIDER ------------------------------*/
    	.slider-container {	
    	}
    	.slider {
    		position:relative;
    		padding:5px;
    		background:url(images/slider.png) no-repeat center;		
    		height:415px;
    		width:846px;
    	}
    	.fp-next, .fp-prev {
    		margin:200px -45px;
    		width:18px;
    		height:24px;
    	}
    	.fp-title{
    		font-size:13px;
    	}
    	
    	.fp-prev-next-wrap {
    		margin:0 -5px;
    	}
    	.slider-nothumb .fp-slides, .slider-nothumb .fp-thumbnail, .slider-nothumb .fp-slides-items {
    		height:188px;
    	}
    	.fp-slides,.fp-thumbnail,.fp-slides-items  {
    		height:415px;
    		width:846px;
    	}
    	.fp-content-fon {
    		border:1px solid #fff;
    		height:80px;
    		width:400px;
    		left:30px;
    		bottom:30px;
    	}
    	.fp-content { 
    		left:20px;
    		right:414px;
    		bottom:32px;
    		height:70px;
    		text-align:left;
    		font-size:13px;
    	}
    	.fp-content a{
    		color:#fff !important;
    	}
    	.fp-nav {
    		right:0;
    		bottom:-30px;
    		left:0;
    	}
    	.slider-nothumb .fp-content-fon {
    		background:#fff;
    	}
    	.slider-nothumb .fp-content a,.slider-nothumb .fp-content p{
    		color:#000;
    	}
    	
    	#footer .footer_txt .container {
    		
    	}
    	.content-l #content .container { background:url(images/content/main-l.png) left top repeat-y; }
    	.content-r #content .container { background:url(images/content/main-r.png) left top repeat-y; }
    	.content-lr #content .container { background:url(images/content/main-lr.png) left top repeat-y; }
    	.content-l2 #content .container { background:url(images/content/main-l2.png) left top repeat-y; }
    	.content-r2 #content .container { background:url(images/content/main-r2.png) left top repeat-y; }
    	.content-n #content .container { background:url(images/content/main-n.png) left top repeat-y; }
    
    	#content-bottom { background:url(images/content/bottom.png) left bottom no-repeat; height:44px;  }
    }	
    
    
    /*	-==========================- TABLET -==========================-  */
    @media only screen and (min-width:640px) and (max-width:1023px) {
    	#header {
    	}
    	#logo {
    		text-align:center;
    		background:#fff;	
    	}
    	#header-banner {
    		margin-top:25px;
    		float:right;
    	}
    	#header-block{background:none;}
    	/*------------------------------ MENU ------------------------------*/
    	.menusearch {
    		position:relative;
    		margin-top:-60px;
    	}
    	#secondarymenu-container {
    		padding-top:0px;
    	}
    	#secondarymenu {
    		clear:both;
    	}
    	#secondarymenu li {
    		
    	}
    	#secondarymenu li a{
    		padding:15px;
    		font-size:15px;
    		color:#fff;
    	}
    	#header li ul{
    		padding:0 0 0 15px;
    	}
    	#header li ul li a{
    		padding:0;
    	}	
    	#mainmenu-container {
    		clear:both;
    		padding-bottom:10px;
    	}
    	#mainmenu li {
    		padding:0;
    		float:left;
    	}
    	#mainmenu a {
    		color:#fff;
    		font-family:'oswald';
    		text-decoration:none;
    		font-size:15px;
    		padding:10px 15px;
    		display:block;
    	}
    
    	
    }
    
    /*	-==========================- MOBILE -==========================-  */
    @media only screen and (min-width:240px) and (max-width:639px) {
    	.menusearch {padding:13px 0;margin-top:28px;}
    	#header {
    	
    	}
    	#logo {
    		margin-top:5px;
    		margin-bottom:-35px;
    		background:#fff;
    		padding:5px 0 !important;
    	}
    	#header-block{background:none;}
    	.searchbtn {
    		width:auto !important;
    	}
    	#secondarymenu-container {
    		padding-top:6px;
    	}
    	.mobile-menu{background:#fff;}
    	#secondarymenu, #mainmenu {
    		background:#fff;
    		padding:0 2%;
    		margin-top:10px;
    	}
    	#secondarymenu li, #mainmenu li {
    		border-top:1px solid #d7d7d7;
    	}
    	#secondarymenu li a, #mainmenu li a{
    		color:#363636;
    		text-decoration:none;
    	}
    	.fp-next, .fp-prev {
    		margin:0 -5px;
    	}
    	.footer-widgets .widgetf:first-child {
    		border:none;
    	}
    	
    	#footer {
    		width:100%;
    	}
    	.widgetf {
    		border-top:1px solid #d3d3d3;
    	}
    	.articles .post-date {
    		float:none;
    	}
    	.articles dt p img {
    		display:none;
    	}
    	.fp-nav {
    		bottom:-18px;
    	}
    	.slider-container {
    		padding-bottom:20px;
    	}
    	#s {
    		width:70%;
    	}
    }
    
    #menu-box { visibility:hidden; }

    Thanks for the help!
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2007
    Posts
    18
    Rep Power
    0
    I would suggest you load your page in Firefox and then open up Firebug to look at your page with. It will tell/show you the div that contains that image, and the parent divs and their size and in what style sheet the css property is in. Wordpress them can have several style sheets, and they can be located in different folders. Depending on how the theme was written, you might only have to change the size of one div, or you might have to change more than one. Keep in mind that the changes you make may effect other things, and may show differently in different browsers.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    3
    Rep Power
    0
    Originally Posted by nakins
    I would suggest you load your page in Firefox and then open up Firebug to look at your page with. It will tell/show you the div that contains that image, and the parent divs and their size and in what style sheet the css property is in. Wordpress them can have several style sheets, and they can be located in different folders. Depending on how the theme was written, you might only have to change the size of one div, or you might have to change more than one. Keep in mind that the changes you make may effect other things, and may show differently in different browsers.
    Thank you, thank you, thank you!

    The add-on is excellent and just what I needed. I tried to change different figures and one turned out to be just what I wanted!

    The only thing now is that when it gave more space above the slider for the header, it also makes blank space appear under the slider too. Will have to try and figure out how to get that extra space go away now..

    If someone has a solution, would be awesome but thank you for this, you're a lifesaver!
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    3
    Rep Power
    0
    Alrighty. Everything resolved now.

    Thank you so much for the help!

IMN logo majestic logo threadwatch logo seochat tools logo