I am struggling to get the header logo on http://inksharks.com centered in most desktop browsers. It does center when scaled to a mobile or tablet view. I have tried several things this was the closest I got to fixing it but it altered my footer as well.
.wrap-inner .twelve.pane {
margin-left: 0 !important;
width: 930px;
}
On .logo, h1.logo remove float: left;. Then on .logo img, .logo .text-logo, .logo .description put
CSS:
.logo img, .logo .text-logo, .logo .description{
display: block;
margin: 0 auto;
}
<h1 class="logo img-only">
</h1>
add an align attribute to this, and it will look like
<h1 class="logo img-only" align="center">
</h1>
It will work fine
This will center align your logo:
h1.logo {
float: none;
}
div.wrap-inner {
text-align: center;
}
I am overriding the float: left on your h1.logo, it's better to remove it though if you can.
Also remove padding-top:44px from .nav-right .navigation-wrap to fix the space between the logo and your content.
Related
I want to achieve this:
I have achieved this:
I don't understand why is there gap above the button images? The page is live at http://shrineweb.in/other-files/clients/omypet/tellerest/index.html
Markup:
<section id="banner">
<nav> <img src="images/tellerest-homepage-design_09.png" alt=""><img src="images/tellerest-homepage-design_10.png" alt=""><img src="images/tellerest-homepage-design_11.png" alt=""><img src="images/tellerest-homepage-design_12.png" alt="">
</nav>
</section>
CSS:
#banner { width: 950px; margin: 0 auto; text-align: center;}
#banner nav { margin: 0; padding: 0;}
#banner nav img { margin: 0; padding: 0;}
The issue is created by the logo image. Images are inline elements so they have a white-space after them. To remove the white-space, you can display the image as a block element by adding this CSS :
header > img{
display: block;
}
Change your header css and add same height as your image like this
header { width: 950px; height: 56px; margin: 0 auto; text-align: left;}
There is a float issue please add this code
header img {
display: block ;
}
You can use either of these to prevent this:
header img {display: block;}
header img {vertical-align:top;}
The gap is caused by the image's default vertical-align: baseline, which aligns it with the baseline of any text it might sit beside.
Whenever I center text in my css, it also centers the images too. Why is that? The text is inside a div ("left") and the images are inside the second div ("right"). Here is the HTML -
<div class="left">
<p>
BANKS</div>
<div class="right">
<p>
<img src="http://www.dogtraining-hampshire.co.uk/dog_training_classes_puppy_1.jpg" border="0">
</div>
And the CSS -
#wrapper {
width: 100%;
overflow: auto;
text-align: center;
}
.left, .right {
width:48%;
margin-bottom: 5px;
}
.left {
clear:both;
float:left;
margin-right:1%;
}
.right {
float:right;
margin-left:1%;}
}
I've tried adding "#wrapper img" to the CSS and setting the images to float left but this hasn't worked either.
Here is a jsfiddle of the full css and html - http://jsfiddle.net/rHEJA/
Downvoters
Any reason for the downvote? I am happy to change my answer!
Images are inline elements, so they abide by the rules given in text-align. If you don't want them to follow it, you can very well give another rule like:
#wrapper img {text-align: left;}
Or, in a better way, just to center the div, you can also do something like:
.centerDiv {width: 50%; margin: auto;}
This makes the <div> to be centred.
This is just what text-align: center; does as a CSS property. Images will also align to the right if you set it to text-align: right;.
You can change your CSS to include the following:
#wrapper img { text-align: left; }
I've got a logo on my website that i'm trying to make stay in the middle and be responsive. I've tried tons of CSS code from "magin-left:auto;..." to "top:30..." but the logo wont get smaller and stay in the middle. I was wondering if anyone could help me. Heres my website -- http://www.mediadude.co.uk -- The logo is the big mediadude sign in the middle, Try resizing the browser and you can see that it doesn't stay in the middle and get smaller.
Thanks for you time.
Hantoo
You have set max-width to the image but not to the h1 tag.
h1#LogoMain {
max-width: 100%;
}
Also you have a media query giving body padding: 20
#media (max-width: 767px) {
body {
padding-top: 0;
padding-right: 20px;
padding-left: 20px;
}
Change the above values to 0 for an edge to edge look on your header etc.
This will do what you want: http://jsfiddle.net/TJF8k/1/
<div class="header">
<div class="floater"></div>
<div class="imgwrap">
<img class="image" src="//placehold.it/400x150">
</div>
</div>
For the CSS, you'll need to adjust the negative margin-bottom on .floater based on the dimensions of your image.
.header {
background-color: teal;
height: 300px;
}
.floater {
height: 50%;
width: 100%;
margin-bottom: -10%;
}
.imgwrap {
width: 50%;
margin: 0 auto;
max-width: 400px;
}
.image {
max-width: 100%;
vertical-align: bottom;
}
I have a regular layout that looks that this:
This layout is done using CSS floats.
When I switch to mobile, I want my layout to do this:
That is, I want my sidebar to be below the content. I can do this using absolute positioning, but I was wondering, is there a way to do this using floats so that if my content changes the sidebar will adjust for the height difference?
Here's how I would do it. The DIVs are floated on your desktop version, but displayed on top of eachother (default block display) on mobile.
CSS:
#sidebar {
float: left;
width: 30%;
}
#content {
float: right;
width: 70%;
}
.mobile #sidebar,
.mobile #content {
float: none;
display: block;
margin-bottom: 15px;
}
Standard HTML:
<body>
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Mobile HTML:
<body class="mobile">
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Media query, flex container and its order property should do the trick:
#media(max-width:767px) {
.container {
display: flex;
flex-wrap: wrap;
}
.content {
order: 1;
}
.sidebar {
order: 2;
}
}
Make sure to replace max-width value with your own mobile breakpoint.
Browser support for flex is also pretty decent now.
Assuming:
The two elements have a shared parent element
The content div appears BEFORE the sidebar in the source
You don't have to change the source order, you can achieve this with floats by default.
That is, in your desktop layout:
#content {
float: right;
width: 60%;
}
#sidebar {
float: left;
width: 40%;
}
Then, for mobile (using media queries or whatever other mechanism):
#content, #sidebar {
float: none;
clear: both;
}
Inside your mobile media queries set float:none.
Actually, I wanted to set layout like first layout so I had used:
.iconHome{
float: left;
border: 1px solid #73AD21;
width: 50%;
height: 100px;
background-color: aqua;
/*margin: 50px;*/
}
<div class="iconHome1">
</div>
<div class="iconHome1">
</div>
The result is the second layout!!!There fore, I think default "float:left" is not be set on mobile. You can use above way. Hope help you
Edit:
I tried some codes:
.iconHome1{
float: left;
border: 1px solid #73AD21;
width: 50%;/*185px*/
height: 200px;
background-color: aqua;
margin: 0;/*0 0 0 -7px*/
/*clear: left;*/
}
That means "width" & "margin" will effect to layout,although you have to set "float:left". Fix "width:49%", result:
I am struggling with my website, I am trying to get the divs at the bottom to go in the center. The main text section centers and displays fine, its only the footer where the text won't align in the center. Has anyone got any ideas what I am doing wrong?
Here is my css code.
#footer{
float: left;
width: 100%;
height: 100px;
background-image: url(images/jf_footer.png);
color: #C7C7C7;
font-size: 0.75em;
}
#footercontainer{
width: 960px;
margin:0px auto;
margin-top: 20px;
}
#footertext{
float: left;
text-align:center;
margin-top: 15px;
color: #C7C7C7;
font-size: 1em;
}
#footerlinks{
float: left;
}
HTML:
<div id="footer">
<div id="footercontainer">
<div id="footertext">Copyright NV Blinds 2012</div>
<div id="footerlinks">
<ul>
<li>Home</li>
<li>About</li>
<li>The Collections</li>
<li>Distributors</li>
<li>Our Team</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Its hard to guess what exactly you are looking for.. i've aligned the links side by site and the #footerContainer is at the center -- you can check it if the window size is more than 960px.. well,enough said -- check the demo
DEMO
Not sure about your HTML but I guess it may be because you use float:left in your footer related styles.
I think the main reason that you don't get text aligned in the center is the fact that using floating on containers (div) will make them have width equal to content, but not 100%.
So text-align (which only has effect on inline elements like links, spans, inputs) can't align the content in the center because it already takes the full size.
I guess the problem is here: using float:left with conjunction of text-align:
#footertext{
float: left;
text-align:center;
}
See my CSS below with notes. I've included the bare minimum you need to get what I believe is your desired effect. (If you want both the #footertext and #footerlinks to be on the same line, just add display:inline to both ids.
#footer {
width: 100%;
}
#footercontainer{ /* corrected spelling to match HTML id */
width: 960px;
margin: 0px auto; /* horizontally centers div */
}
#footertext{
text-align: center; /* horizontally center text */
}
#footerlinks{
text-align: center; /* horizontally center text */
}
#footerlinks ul {
list-style: none; /* remove bullets from list */
}
#footerlinks ul li {
display: inline; /* make li elements inline */
}