Hello using a child theme, getting all the other elements working with the responsive design - just not the logo?
link to site
Using this code at the moment;
header#masthead hgroup .logo img {
vertical-align: bottom;
height: 80px;
width: 300px;
margin-left: 390px;
}
Many thanks
These two lines
display: block;
margin: 0 auto;
are a good place to start to center something.
Common reasons for that not to work is if the element is floating or has its position set to something besides static. In those cases you can try float: none;, or position: static; or position: relative;. In the case of relative be sure to also set the relevant top, bottom, left, and right properties.
There are a many cases where none of these things will help, but in your case and in most simple cases, the above will get you there.
Try this for your CSS
header#masthead hgroup .logo {
display: block;
float: left;
max-width: 100%;
position: relative;
left: 50%;
margin-left: -150px;
}
header#masthead hgroup .logo img {
vertical-align: bottom;
height: 80px;
width: 300px;
}
No need for big margin-left. the code on the .logo div moves the logo 50% across the screen, to center it completely, you then have to remove half the width with a margin-left: -150px.
I tried the code out on your website so it should work. Hope it makes sense.
Related
I have two divs in a parent div. They render side by side
<image><info>
but on smaller screens I want them to render one under the other and swap positions, like
<info>
<image>
So, their real order in html is
<info>
<image>
and they both have float:right so they appear swapped and side by side. On smaller screens they both have float:none and thet appear one under the other as they should. I used Shlomi's answer from here and it works fine.
The problem.
When horizontal, I wan to align the divs on the left, but due to the float:right, they align right.
So I thought I give the container position:relative and the children position:absolute , so then I can do left:0; and right:0. This make the container have zero height and a vertical scrollbar appears. If I remove the position:absolute its back to normal, but no left aligned.
So either I can use position:absolute and fix container's height or my solution is stupid and maybe you suggest something else.
My code right now
#container{
width: 100%;
height: auto;
display: block;
margin-top: 30px ;
padding-bottom: 38px;
clear: both;
overflow: auto;
position: relative;
}
#image{
display: block;
height: 221px;
width : auto;
float: right;
margin-right: 20px;
position: absolute;
clear: both;
overflow: auto;
}
#info{
width:-moz-calc(100% - 331px);width: -webkit-calc(100% - 331px);width: calc(90% - 331px);
height: 500px;
display: block;
float: right;
position: absolute;
clear: both;
overflow: auto;
}
You might use
float: left;
instead :)
Here is the fiddle of Shlomi updated :
https://jsfiddle.net/sk99xqdd/4/
I'm not sure if it answers your question ...
I have two child divs (inline-block) inside a wrapper div. I want the left Div to be centered and the right one simply on the right of the left div.
<div id="Wrapper1"><div id="leftElement1">LEFT ELEMENT</div><div id="rightElement1">RIGHT</div></div>
The Problem is, if I use margin-left to reposition the whole wrapper, the Left Element is not centered on small screen sizes.
If I center leftElement1 and use position: absolute to position rightElement1 the Warpper Div does not adjust its width and height according to its children.
For a better understanding check http://jsfiddle.net/aaq810gs/6/
Any help is appreciated!
If i understand right you want something like this:
#rightElement1 {
background-color: blue;
position: relative;
width: 100px;
display: inline-block;
height: 50px;
float: right;
top: -100px;
}
Applied in your first example.
fiddle
Or something like this:
#rightElement1 {
background-color: blue;
position: fixed;
width: 100px;
display: inline-block;
}
fiddle
I am not really sure if I get exactly what you mean, but I think something like this could work for you.
- You better switch to %, because than it will work better on mobile devices.
- Second thing is adding margin:0 auto; for #leftElement1 so it stays in the middle. #rightElement2 will just stick to it on the right, because it is inline-block.
Now you can add whatever margin to the wrapper and it stays the same.
Fiddle http://jsfiddle.net/stassel/vzx6fm55/
HTML:
<div id="Wrapper1">
<div id="leftElement1">LEFT ELEMENT</div>
<div id="rightElement1">RIGHT</div>
</div>
CSS:
#Wrapper1 {
width: 90%;
background-color: red;
margin: 0 auto;
white-space: nowrap;
padding: 10px;
margin-left:10%;}
#rightElement1 {
background-color: blue;
width: 10%;
display: inline-block;
height: 50px;}
#leftElement1 {
background-color: green;
width: 60%;
margin:0 auto;
display: inline-block;}
div {
height: 100px;
text-align: center;
color: white;}
SOLVED
Thank you for all your answers! Unfortunately I wasn't able to describe my Question properly, so none of the solutions worked.
Finally I was able to solve the problem myself. The Key to the solution was another centered outer wrapper, with a fixed size of the to-be-centered Element and overflow: visible. The inner content overlaps now the outer wrapper.
#outerWrapper {
width: 700px;
overflow: visible;
margin: 0 auto;
}
#Wrapper {
width: 810px;
background-color: red;
}
http://jsfiddle.net/aaq810gs/9/
I want to make a div (my sidebar) stretch to the bottom of the page. I know that I need to add "height: 100%;" in order to do that.
But when I add height: 100%;, pages that have less content than the sidebar cuts the sidebar's height and then you can't see the sidebar content.
This is the index page . Everything looks exactly the way I want it to.
This is a sample page . Notice that the sidebar has been cut.
CSS:
#menu-container {
background-image: url('floral.png');
width: 300px;
display: inline-block;
vertical-align: top;
height: 100%;
overflow: hidden;
position: absolute;
}
#menu {
background-image: url('menubg.png');
width: 220px;
margin: 0;
padding-top: 50px;
padding-left: 30px;
padding-right: 20px;
color: #e8e8e8;
height: 100%;
}
#content {
padding: 0px 0px 30px 325px;
width: 1000px;
display: inline-block;
vertical-align: top;
}
Thanks in advance!
* #Ritabrata Gautam *
The changed CSS fixed my second problem but now I'm back to the cut off sidebar on shorter pages: See here: http://www.tarawilder.com/staging/?page_id=19
I'm leaving my house now, I'll be able to respond later tonight. Thanks again for your help!
#container {
display: inline-block;
height: 100%;
position: absolute;
width: 900px;
}
try this..it will give you the result you want..though there are many other mistakes in your html markup
some other areas where you need to be careful...
your container's width is 900px..which contains side menu and the large text...combined width of your side menu and the large text is far greater than your 900px width of your container..as you are not using overflow:hidden; you cant see the effect...why dont you apply overflow:auto; width:100% or something like that
BETTER CSS::
#container {
height: 100%;
width: 100%;
overflow: auto;
position: absolute;
}
ACCORDING TO YOUR NEW PROBLEM :: now your body height must be more than 100% now..thats why after 100% height your side menu becomes invisible
CHANGED CSS ::
#container {
height: auto;
overflow: hidden;
position: absolute;
width: 100%;
}
your third problem ::
strange...you are now using width:100% for your cantainer..and your container contains side menu and large text...and side menu has width of 300px and then your having width of 1000px for large text..so naturally the overflowed part ot the text gets invisible; and also remove position:absolute; from container
now your css
#container {
height: auto;
overflow: hidden;
width: 100%;
}
#content {
padding: 0px 0px 30px 325px;
vertical-align: top;
}
NOTE:: don't delete your edited part of your question..you have already deleted the 2nd edit you made to your question earlier...it will create difficulties for future users to relate the answer with question
Make sure that your parent containers (#container, body, html) are height:100%; as well.
Personally, I would do something like this(if the rest of the site layout allows it):
Instead of creating separate backgrounds for #menu, #menu-caontainer and body i would create background on body something like this: http://cl.ly/image/3L060f2w3Z0s
that would repeat vertically on y axis, so no matter how high the body is the background would stretch/repeat to the bottom.
I'm back with more questions!
It's likely something very simple, but it has confused the hell out of me. I have a layout set-up so that the H2 text on pages and posts (Wordpress) has a background image next to it on both sides, accomplished by use of span:before and span:after.
Here is how it is working correctly and what I would like the overall CSS to achieve:
http://www.weburton.co.uk/content/demo/?page_id=121
This is currently achieved by min and max-widths in the CSS. And I've had the width part set to auto, where it is under a parent element with the width of the page. I don't understand how the lines aren't automatically resizing based on the H2's width. See, the problem here:
http://www.weburton.co.uk/content/demo/?p=36
Here is the CSS that is used:
#pagewrapper{
width: 960px;
margin: 0 auto;
position: relative;
padding-top: 140px;
text-transform: uppercase;
}
h2 span:before{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll left center transparent;content:" ";height:1px;margin-right:15px; left: 0%; position:absolute; margin-top: 15px; min-width: 25%; max-width: 50%; width: auto; }
h2 span:after{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll right center transparent;content:" ";height:1px; margin-left:15px; right: 0%; position:absolute; min-width: 25%; max-width: 50%; width: auto; margin-top: 15px; }
Basically, I've exhausted all options that I can think of. Is there something I'm missing here or is there another way to go about achieving this styling using something else but span that is easier?
Oh and I know I have some redundant styling calls, I'm in the process of cleaning it up. :)
Thanks in advance! :)
May be that is what you want
Remove min-width and max-width from h2 span:before and h2 span:after
h2 span {
position:relative;
}
h2 span:before {
left: -25%;
width: 20%;
}
h2 span:after {
right: -25%;
width: 20%;
}
without a fiddle it's hard to give you a definite answer, but I think that if you try changing the display property to display: inline-block it should do the trick.
This will cause the element to act as a block element while still being displayed inline (thus preserving your current layout - block elements typically take up the full available width and are followed by linebreaks).
I´m currently working on a wordpress site where I want to center my page-wrap using CSS. I´ve tried to implement method 3 on this site without beeing successful.
Site: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
I´m using two different divs, one with the id of floater and one with the id of page-wrap. My css looks like this
#floater { float: left; height: 50%; margin-bottom: -481px; }
#page-wrap { clear: both; color: white; width: 1594px; height: 962px; margin: auto; position: relative; }
I also want to point out that inside my page-wrap div I have plenty of other divs to build my design (they also float to both left and right) if that affects the result in any way.
Link to JSFiddle: http://jsfiddle.net/FERNX/
try
#floater{
margin-top: 25%;
}
or
position: absolute;
top: 50%;
margin-top: -25%;
if you know it's height the most east and straightforward solution is:
#page-wrap { position: absolute; height: 900px; top: 50%; margin-top: -450px; }
basically it says; position its top at 50% and substract half its height to have the div's center centered.