I would like the logo and the image slider to center on my responsive site.
Basically, the logo and the slider are next to each other on a full size screen. I can make the slide disappear when the site isn't wide enough and the logo shrinks.
What I want to do is make the logo and the slider center once they are no longer next to each other.
Please help: http://ranchocordovaeventscenter.com/
Thank you,
Matt
You can center the child elements of hgroup tag by setting margin: 0 auto;text-align:center on the hgroup
this will cause the contents to be centered within that div
Put the logo and slider in a div and give it a fixed width. If this div has #inner id, the solution will be:
#inner {
width:1000px;
display:block;
}
the given answers will only work if you use both of them, centring with margin: 0 auto; only works if a width is specified, and having a div just display as a block will not change the appearance.
Try the css:
div {
width: 500px;
margin: 0 auto; }
along with other styling, and it should center
Related
I have an tag which stays at full height on mobile but the width is dropped (which is what I want). Now how do I centre this image? I have tried:
margin 0 auto
text-align: center
None if the usual image centring methods seem to work. You can view the image below:
http://helenshill.com.au/beta2/shop/
I have added:
width: 100%;
Which centres the image but also skews the dimensions. I want the image to maintain aspect ratio but be cut off and be centred.
Give this a try
CSS
.product img{
max-width:100%;
}
Hope this Helps...
I want to position a few small images beside a div and margin them correclty instead of being overlapped by the emphasized textcenter-div.
JSFiddle Demo:
`http://jsfiddle.net/k7gLfeuc/`
The Problem is: When I scale the browser-window, the images disappear behind the "center"-div instead of margin to it.
Both Navigation-Div and Center-Div are margin pretty well to each other. But the images wont.
I tried it already with "clear:left/right/both", but with no success.
What am I doing wrong? I just want the images left to the center-div to margin correctly to the center-div.
Than you.
Is this what you need? live demo http://jsfiddle.net/k7gLfeuc/2/
Add below to your existing code:
#side {
left:0;
width: 19%;
overflow: hidden;
}
I would like to know how do I achieve the effect in attached image. Logo is an image and transparent while there is still a background to the top navigation.
Thus if user scrolls down, the logo "changes" based on image or color behind it.
I have tried making two divs ( logo and links) within main div ( 100% width and 80px height). If logo is 200px wide, how do I ensure the right division always fills the rest of the viewport.
.mainnav{widht:100%;position:fixed;height:80px;}
.logo {background:url(logo.png);float:left;}
.links{width:???;background:#272727;float:right;}
Appreciate any help and seeing alternative methods.
give widths of the logo and links in percentages which makes the logo container responsive.
.logo{
width:20%;
}
.links{
width:80%;
}
Try this code:
CSS:
.mainnav{widht:100%;position:fixed;height:80px;}
.logo {background:url(logo.png);float:left;width:20%;background-repeat:no-repeat:background-size:100% 100%;}
.links{width:80%;background:#272727;float:right;}
None of the proposed solutions worked under different resolutions.
Best solution probably is to have 2000px image as header and overflow:hidden.
Thank you
i am having trouble center aligning images.
The images should stay in center never mind what size your screen is.
the problem is that the images are only center aligned until a specific size. my screen is quite small so they're perfectly centered, but when i go down to %75 the images are already not center aligned wich makes everything ugly.
i'm going to save you from spamming my code here, so just view the source of this page.
Thank you for reading :)
You're wrapping the images in a span8 offset2 div, which isn't designed for keeping them centered, but for keeping the element at a set width/left-offset.
Trying setting that parent div like so:
#showcase .row-fluid > div { margin: 0 auto; width: 612px }
Your code is pretty close already, since your .head divs are already inline-blocked, and your #header is text-align: center. What you'll want to do is remove the offset2, and change the span8 to a span12 so it encompasses the entire width.
The div holding the images needs to have
margin: 0 auto;
and the image blocks need to have:
float: none;
display: inline-block;
I have seen this in your CSS and HTML code, if you remove it(CSS only) will stay in center.
HTML
<div class="span8 offset2">
</div>
CSS
Before
.offset2:first-child {
margin-left: 17.094%;
}
After
.offset2:first-child {
/* margin-left: 17.094%;*/
}
I am creating a page that has a background image and the content is within a centered container that runs vertically down the page. Similar to the Yahoo! Answers layout: http://uk.answers.yahoo.com/
If you minimise your browser while on Yahoo! Answers the vertical scrolling just becomes 'longer' and the content all stays on the white container.
However, on mine when I minimise my browser the content towards the bottom of the container overflows and appears on the background image instead. I want the container to expand..
I do not want to use the overflow:auto or any other overflow attributes and I don't like the scroll bars.
Please see below and thank you in advance:
body {
background-image: url('images/ppback.jpg');
padding: 0;
margin: 0;
width:100%;
height:100%;
}
#container {
position: relative;
background: #440077;
width: 770px;
margin:0 auto;
top: 0px;
height: 100%;
opacity: .7;
filter:alpha(opacity=70);
)
Just remove the value height: 100% from #container. This is setting the max height of your container to the same height as the browser window, preventing anything longer than the window from being displayed.
I'm guessing that you added this property so that the entire background will display on the page when there is little page content. To get the effect you're looking for you may have to create a separate div, in a fixed position, and positioned center, with a z index smaller than your main #container.