Hello I have a header that I am trying to get working and I just got the menu working correctly, but now I can't get the size working properly.
The header is located at www.g-evo.com/header.php and what I want to do is shrink the grey a little bit so its more flush with the logo. I still want to keep those coloured boxes in the white however.
The CSS looks as such:
<style type="text/css">
#header-container {
/* centering for IE */
text-align: center;
}
#menu {
width: 950px;
/* centering for other browsers */
margin: auto;
}
#logo {
width: 950px;
/* undo text-align on container */
text-align: left;
/* centering for other browsers */
margin: auto;
border-style:hidden;
border-width: thick;
}
body {
width: 950px;
/* undo text-align on container */
text-align: center;
/* centering for other browsers */
margin: auto;
}
#headercolor {
background-color:#EEEEEE;
}
</style>
Thank you
I believe this is actually a matter of your HTML markup, rather than your CSS. You have two #logo divs (as a side note, you should only use each ID once per page), the second of which is causing the extra gray space you are referring to.
You should put /header_media/GTextured.png and /header_media/shapeimage.png in the same div, and align them next to one another, which should solve your problem.
For starters, you're using the "logo" id on two different items on the same page... that's not correct, since the ID attribute should be unique per element.
On the other hand, I don't really understand what you want, but if it's just to get the menu a bit closer to the logo, I'd add a class or change the id for the second div with the logo ID and set it a height of 20px, or so..
Related
I am working on a WordPress website and have styled the templates header in CSS. I've given it a different background image and it's working, the only problem I have is on mobile.
On mobile there seems to be a white gap to the right of the image and I was wondering if anyone knows a solution to this?
You header element—
<header id="home" class="header menu-align-center" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
</header>
has a min-height:100px set. Increase that number until the image goes all the way across. Try 112px.
For images I learned for myself that it works best to define the container using an aspect ratio, so that it's forced to take up the space you want it to. And then make the image position: absolute inside the container and force it to fill the parent container using object fit: cover and set both lengths to 100%. The image will then automatically fill 100% height or width whatever of both is required:
<div class="image-container">
<img src="...">
</div>
.image-container {
&:before {
/* create a 1px bar inside the container and stretch it according to padding-top */
content: "";
width: 1px;
margin-left: -1px; /* 1px bar with -1px margin will make sure no space is taken */
float: left;
height: 0;
padding-top: 50px / 150px * 100%; /* height / width ratio. So this would result in 3x as wide than high. 100% always refers to the width of the container which makes this trick work */
}
&:after { /* to clear float */
content: "";
display: table;
clear: both;
}
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
}
You can then also make the container switch aspect ratio by simply changing the .image-container:before{padding-top:;} in your media queries.
Also note that at best the <div> container would be replaced with a <picture> tag providing some different image sizes. Then you have performance increased and no extra DOM nodes as you need the picture tag anyways.
i have a padding problem that only affect mobiles.
the reason for this issue is some how known, but how to fix the the issue without affecting the computers preview.
here is the suspect
.entry-content,
.entry-summary {
margin-top: 20px;
max-width:1000px;
width: 100%;
float: none; /* i don't know if this affect any thing */
**float: none!important;**
**padding-left:150px !important;**
}
here a preview from the desktop so you can understand the reason behind the padding.
it looks like that padding in a general setting or so.
so what can be done to the solve the problem?
re-allocate the padding line to more specific function ?
or something else.
It seems you identified the problem yourself. The padding is applied in the mobile page.
A fix would be to use a media query to find out if the user is viewing on a desktop. If he is, add the padding to the element.
first remove the padding from the main styling of the element
.entry-content,
.entry-summary {
margin-top: 20px;
max-width:1000px;
width: 100%;
float: none; /* i don't know if this affect any thing */
**float: none!important;**
}
and add something like this to your stylesheet
#media only screen and (min-width : 1224px) {
.entry-content, .entry-summary {
padding-left: 150px;
}
What this does is only applying the padding-left if the screen's width is larger than 1224 pixels (so a desktop, basically).
A better solution though, would be to change the elements so the left-padding is not needed to position the text right. But this is an HTML issue and I don't have enough information to help you with this.
I would like a DIV's background-color to change when I hover over it. I can get it to work if I don't set the background-color in the DIV's style property but I don't understand why this stops the hover colour from being applied?
<style>
.hovery {
cursor: pointer;
display: block;
float: left;
margin-bottom: 4px;
margin-right: 10px;
border: 1px solid gray;
border-radius: 6px;
}
.hovery:hover {
background-color: black;
}
</style>
When I create my DIV (in PHP) I'm using the code below and I'm setting the background-color property at the time of creation so that I can set the 'selected' one to a different colour than all the other DIVs:
echo "<div class='hovery' style='background-color: " . ($onthis==$shrow['Name'] ? $_SESSION['branding_buttonColour'] : "#EEEEFF;"). " '>\r\n";
I've discovered that if I don't set the background-color in the code above then the hover colour-change works, but why does setting the background-color prevent the hover colour from working? Aren't they two different things?
This is called specificity and you are giving the whole strength to the inline styling. Avoid it or make javascript tricks (like on hover adding a classname). You can make too this:
.hovery:hover {
background-color: black !important;
}
But I don't like it so much. If the inline styles are mandatory for your requirements, use !important. Otherwise, remove the inline styles.
You're best off adding a class to the element within PHP, then controlling the background-color of that class with CSS.
The added benefits of this is keeping your code clean, avoiding use of inline styles (which over-rides every rule) and you can easily change the class via Javascript which in turn changes the color.
I want to customize a Wordpress theme (Attitude) in order to add a sticky footer. Unfortunately I am faced by two problems:
If there is not enough content to fill the complete page, a grey gap between the content and the footer appears: Demo
If there is enough content to fill the page, the footer is overlaying the content but I wont the footer to be placed at the end of the page, after the content
(if there is enough content to fill the page): Demo
This is my current CSS customizing:
body {
height:100%;
}
.wrapper {
min-height:100%;
position: relative;
}
#site-generator {
position:fixed;
bottom:0;
width:100%;
background-color: #fff;
max-width: 1038px;
}
Could you please help me by explaining what I can do to solve my problems mentioned above? Thank you very much.
For your Demo 1 example above please add this to your CSS style-sheet:
html {
height: 100%;
}
This will allow your body tag and it's other children to inherit the height of its main ancestor, the html tag. Extending the content to the bottom of the page. Make sure to always have height:100%for both the html and body tag, in order to have it work.
For your Demo 2 example above add this:
html {
height: 100%;
}
.wrapper {
padding-bottom: 65px; /* same value as footer .site-generator height */
}
#site-generator {
position: absolute; /* use absolute instead of fixed */
}
The reason I use position:absolute instead of position:fixed, is because fixed will always be on top in the same position in the browser viewport.
Im building my first website and this is first time asking for help. I am unsure of how to position the sidebar widget area of my site in the position I want. Im working on making my the site fully responsive. What I am trying to accomplish is get the sidebar to "hug" the content area so they are always next to each other with a small 20-35px margin in-between them, and as screens get larger I want them to stick together. I came across this website http://uberhavoc.com, I am trying to model my sidebar and content in a similar way. Here is my site: http://peakworthy.com.
my site has the main site content area with two divs, the main content and the sidebar. I tried get the to position how i want using percentage margins, played with clears, clearfixs and everything else. I was wondering if I am approaching this wrong or if the DOM is causing issues with style hierarchy. If you have any ideas I would be greatful. been pulling hair out on this for a couple days now.
You need to place your main content area and your sidebar content inside a container element. Then use media queries to determine a breakpoint for when the sidebar should re-flow.
Below is the basic markup of my suggested approach. The main content and sidebar content are the two siblings of a container element. They are floated left and have a percentage width applied to each. A media query is used to determine when the two columns of content should be side-by-side or stacked.
<main class="cf">
<div class="content">Main Content</div>
<aside class="sidebar">Sidebar</div>
</main>
main {
background-color: #ddd;
min-height: 400px;
}
.content,
.sidebar {
float: left;
width: 100%;
}
.content {
background-color: #ccc;
}
.sidebar {
background-color: #bbb;
}
#media ( min-width: 480px ) {
.content {
width: 70%;
}
.sidebar {
width: 30%;
background-color: #bbb;
}
}
The clearfix and background colors used above are only in place for my demo and can be omitted.
jsFiddle: http://jsfiddle.net/vj9zq0oq/
Re-size the jsFiddle to see the content columns re-order.
I'd try to stay away from float if possible. Try this out instead. The display-block places them side by side and will help with the responsive feature because the sidebar will automatically jump down when space runs out, and text-align:center makes them stay in the middle of the page at larger sizes.
.site-content {
padding-bottom: 4em;
background: #f0f0f0;
text-align: center;
}
.content-area {
display: inline-block;
}
.site-content .widget-area {
width: 380px;
padding: .3em 0 .3em 4em;
background: #ffffff;
display: inline-block;
margin-left: 20px;
vertical-align:top;
}