enter image description here
LINK: https://gta.stillwaters.io/
Can anyone help me make the entire header area height 45px? That's about 3 times the size of the font and also, decrease the logo height also. The logo and header area seems too long in height. If that entire could be reduced to 45px?
header.hidden-phone {height: 45px;}
Code above doesn't seem to work.
You have a padding on your header, the rendering engine goes outwards. it first renders the inner box with the specified height then it renders a "frame" that contains that box with the width specified on each side.
I recommend you to disable padding on this element. more information at w3 schools box model
and there is another attribute that can help Box-sizing
You have to remove the padding on #sp-header-wrapper in order to get your header to 45px.
So change this:
#sp-header-wrapper {
padding: 20px 0 !important;
}
#sp-header-wrapper {
padding: 10px 0;
}
#sp-header-wrapper {
padding: 10px 0;
background-color: #FAFAFA;
position: relative;
width: 100%;
z-index: 999;
}
#sp-main-menu ul {
list-style: none;
margin: 0;
padding: 0 0 1% 0;
}
To this:
#sp-header-wrapper {padding: 0 !important;}
#sp-header-wrapper {
background-color: #FAFAFA;
position: relative;
width: 100%;
z-index: 999;
}
#sp-main-menu ul {
list-style: none;
margin: 0;
}
Then resize your logo:
div#sp-logo {
height: inherit;
}
div.logo-wrapper {
text-align: left;
height: inherit;
padding: 3px;
}
img.image-logo {
height: 100%;
}
Here is the result:
Related
Really simple code, the strip I created has a margin or spacing around it and I want it to fill the whole top side of the page.
.header {
background: #555;
color: #f1f1f1;
height: 100px;
/* width: 100%; */
margin: 0;
padding: 0;
border: none;
}
<div class="header" id="myHeader"></div>
These are the margins that come from body.
In CSS you can set the margins of body to 0.
body {
margin: 0;
}
Also note that your <html></html> tags should be surrounding your entire html and your <body></body> tags should be holding all representational elements.
To fill the whole top side of the page, you should set the body's margin to 0px.
.header {
background: #555;
color: #f1f1f1;
height: 100px;
/* width: 100%; */
margin: 0;
padding: 0;
border: none;
}
body {
margin: 0px;
}
<div class="header" id="myHeader"></div>
i have some issues with photo grid.
its like have a padding on right side, i have put rule like padding-right 0
or margin-right or right 0 and still see the issues.
doesnt fit properly
here my workaround https://codepen.io/RIN-id/pen/ZrzyZB
index.html
<ul id="photo-gallery">
<li>
<a href="a.jpg" data-description=" Mulak Mar-onan (Kapal Tuktuk)">
<img src="img/galery/a.jpg" >
</a>
</li>
</ul>
styles.css
#photos {
width: 100%;
height: 100%;
}
#photo-gallery {
width: 100%;
overflow: scroll;
/*! overflow-x: scroll; */
}
h3 {font-size: 20px; color: #fff;}
#photos img {
width: 30%;
float: left;
display: block;
margin: 2px;
}
ul {
list-style: none;
margin: 0px auto;
padding: 10px;
display: block;
max-width: 780px;
text-align: left;
}
#overlay {
background: rgba(0,0,0, .8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
z-index: 5000;
}
#overlay img {
margin: 10% auto 0;
width: 100%;
border-radius: 5px;
z-index: 5000;
position: relative;
padding-top: 113px;
}
thank you, sorry for bad grammar.
try put margin: 0; padding: 0 in your css
The problem is that the images are each 30% width floated left with only a small margin that doesn't offset the 10% gap left over.
What I would do:
-Delete margin for #photos img
-Change width to 33.33%
-Add desired padding (2px for instance)
-Add box-sizing: border-box to include padding in width
try to set
margin: 0; padding: 0
top: 0;
bot: 0;
My issue is that I made a pretty big html page oriented on 125% browser zoom,
however when I put it in 100% all the position's and margin's start to change, thus breaking my html page awfully.
html { width: 100%; height: 280%; margin: 0; padding: 0; }
body { margin: 0 ; padding: 0; background: url(Photoshop/img/header_bg.png),url(Photoshop/img/full_bg.png); background-size: 1600px 655px,cover; background-repeat: no-repeat, no-repeat; }
header h1 { float: left; margin: 28px 0 0 220px; }
nav ul { list-style-type: none; float: right; }
nav li { float: right; margin: 53px 20px 50px 0px; text-transform: uppercase; }
What is the best way to fix the problem, without change every single piece of css code( margins position top right, e.t.c).
I have notoced you are using fixed values in your margins.
Try to use presentage, if that dont work use the #media in css to handle different sizes.
Margin example - margin-top: 10%;
I'm having an issue with the age-old problem of 100% height. I know this problem is asked a lot, and I have reviewed this, this, this and countless more. I want to create a basic fixed header, side navigation and main article area, that looks like this:
But, for some reason it's looking like the following (I put 200px padding in the blue bar just to have it appear).
My HTML looks like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<article></article>
</section>
</body>
</html>
And my CSS looks like this:
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
}
nav {
background-color: #747feb;
float: left;
min-height: 100%;
padding-bottom: 200px;
width: 150px;
}
article {
background: #74eb8a;
margin: 20px 20px 20px 170px;
min-height: 100%;
padding: 20px;
position: relative;
}
As you can see, nothing too special. I know that section needs 100% height, and so does body and html. I can position the nav and acticle absolutely, and make something like this:
But, in my actual site (I simplified it for this), the side navigation has drop-downs, which will change the navigation height dynamically. This causes the following to happen:
Absolutely positioned elements won't change the height of the relative wrapper, so I need to float them. However, floating them doesn't make the height become 100%.
I have even made a JSFiddle to show the problem: http://jsfiddle.net/g8VjP/
If anybody can help me out, I'll really appreciate it.
Thank you!
PS: I'm all for using calc() if it works!
SOLUTION
I modified Mayank's answer and managed to come up with a solution. I had to add a couple wrappers, but it worked. My HTML now looks like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<div class="cell-wrap">
<div class="table-wrap">
<article></article>
</div>
</div>
</section>
</body>
</html>
With the key being the cell-wrap and table-wrap. I have the nav is one table-cell and the .cell-wrap is another. With the nav having a fixed with, the .cell-wrap fills in the rest. However, I want spacing around the article, so I added .table-cell and made that into a table. That then expands and fills the height and width of the .cell-wrap. I then add 30px padding to give a space around the article (because margins don't work on table-cells) and made the article a table cell.
A bit confusing, but it works!
My CSS is as follows:
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
display: table;
height: 100%;
min-height: 100%;
padding-top: 100px;
position: relative;
width: 100%;
}
nav {
background-color: #657182;
display: table-cell;
min-height: 100%;
width: 150px;
}
.cell-wrap {
display: table-cell;
height: 100%;
min-height: 100%;
}
.table-wrap {
display: table;
height: 100%;
padding: 30px;
width: 100%;
}
article {
background: none repeat scroll 0 0 #FFFFFF;
display: table-cell;
min-height: 100%;
padding: 20px 20px 120px;
z-index: 1;
}
Here's the fiddle. Not sure why there's a scroll bar at the bottom though, but it seems fine if you show it just normally in your browser.
height: 100% means 100% of the containing block's height. Your containing block, section, does not have a defined height (but a min-height instead). You can either:
Change min-height: 100% on section to height: 100%. or...
Keep min-height: 100% and add a height: 1px (or anything less than 100%) which will be overridden by min-height.
The key here is to have a height property set on the parent.
display:table and display:tabel-cell are you friends here mate!!
Updated your fiddle to slight workarounds and here you go : DEMO
CSS to modify :
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
display:table;/* addition */
}
article {
background: #74eb8a;
margin: 0px 20px 0px 170px;
min-height: 100%;
width:100%;
height: 100%;
position: relative;
display:table-cell; /* addition */
}
Additionally i took the liberty to remove the extra padding that you have placed inside article , insert a div or section inside article and assign padding to it if it works!!
try this :
nav {
background-color: #747feb;
width: 150px;
position : absolute;
top : 100px;
left : 0;
bottom : 0;
}
article {
background: #74eb8a;
position: absolute;
top : 100px;
left : 150px ; /* nav width*/
bottom : 0;
right : 0;
}
I have created a css sprite image for multiple images. The css for sprite is:
.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}
Now I want to assign the first image from this sprite to an li element. Currently the first images is assigned using background:url property of this li as:
li{margin-top:0;padding:3px 0 3px 25px;background:url(../images/arrow.gif)
How can bring the first image from sprite and assign to the li element. I have seen an example which suggests to use:
<div class="sprites" id="image_5306605314403955_gif"></div>
But I want to see if adding HTML can be avoided and use CSS only for that purpose. The li element on my page looks like:
<li>ABC</li>
I am not sure if that is what you are looking for or not, but the below code should do it:
HTML:
<li class="sprites"><a id="image_5306605314403955_gif" href="http://www.xyz.com">ABC</a></li>
<li class="sprites"><a id="#image_9167572062810537_gif" href="http://www.xyz.com">ABC</a></li>
CSS:
.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}
#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}
#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}
#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}
#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}
#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}
#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}
If what you are looking for is not to use class or id, then I think it is impossible, as your CSS needs an identifier to differentiate between your items (which are inherited from the same class <li>)
body {
overflow-y: scroll
}
.mini_iframe,
.serverfbml_iframe {
overflow-y: visible
}
.auto_resize_iframe {
height: auto;
overflow: hidden
}
.pipe {
color: gray;
padding: 0 3px
}
#content {
margin: 0;
outline: none;
padding: 0;
width: auto
}
.profile #content,
.home #content,
.search #content {
min-height: 600px
}
.UIStandardFrame_Container {
margin: 0 auto;
padding-top: 20px;
width: 960px
}
.UIStandardFrame_Content {
float: left;
margin: 0;
padding: 0;
width: 760px
}
.UIStandardFrame_SidebarAds {
float: right;
margin: 0;
padding: 0;
width: 200px;
word-wrap: break-word
}
.UIFullPage_Container {
margin: 0 auto;
padding: 20px 12px 0;
width: 940px
}
.empty_message {
background: #f5f6f7;
font-size: 13px;
line-height: 17px;
padding: 20px 20px 50px;
text-align: center
}
.see_all {
text-align: right
}
.standard_status_element {
visibility: hidden
}
.standard_status_element.async_saving {
visibility: visible
}
img.tracking_pixel {
height: 1px;
position: absolute;
visibility: hidden;
width: 1px
}