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;
}
Related
Asking for advice: What would be the best way of making my website's (square) logo appear on or to the left of a fluid header?
My header takes up 100% of the width, but resizes in height depending on the viewport size. So I can't simply float the logo to the left of the contents, because then the image doesn't have the right height (and width, because it's square).
I tried setting the picture as background-image to the header, using:
background-position: left;
background-repeat: no-repeat;
background-size: contain;
But the problem then is that it needs different paddings-left at different screen/viewport sizes.
Then tried putting display: table on the header and display: table-cell on the logo and header contents div, but then the header contents resize to the height of the logo rather than the other way around because the logo is the biggest element in line.
Here's the HTML (simplified):
<header>
<div class="header-contents">
<h1>Site title</h1>
<nav>
</div>
</header>
What should I do?
EDIT / COMPLETELY DIFFERENT SOLUTION:
Style it as a CSS table, put the img in a DIV that's the left table-cell, give that a percentage width and auto height:
(Here in a codepen: http://codepen.io/anon/pen/XXNyBe)
<div id="header">
<div id="logo">
<img src="http://placehold.it/300x300/fa0">
</div>
<div id="restofheader">
<h1>My Headline</h1>
</div>
</div>
#header {
background: green;
display: table;
width: 100%;
}
#logo {
display: table-cell;
line-height: 0;
width: 20%;
}
#logo img {
width: 100%;
height: auto;
}
#restofheader {
display: table-cell;
vertical-align: middle;
text-align: left;
padding-left: 30px;
}
Addition, 2 Screenshots where this is applied to your site (with 20% logo width = header height - could be smaller or larger):
Large screen:
small screen:
.header-contents {
background-image: url(yourimage);
background-position: left center;
background-size: auto 100%;
background-repeat: no-repeat;
}
if it is not the answer your looking for, please provide a fiddle and a better explanation :)
What I've done instead now is give fixed header heights for different resolutions. It seems totally fluid is not an option here.
The code, in case anyone's interested:
#media only screen and (min-width: 568px) {
.site-branding {
background: url('http://atlanticsentinel.com/wp-content/uploads/2015/12/Atlantic-Sentinel-logo.png');
background-position: left;
background-size: contain;
background-repeat: no-repeat;
height: 100px;
padding-left: 115px; }
h1.site-title {
font-size: 2em; } }
#media only screen and (min-width: 768px) {
.site-branding {
height: 120px;
padding-left: 135px; }
h1.site-title {
font-size: 3.2em; } }
If there is another option, please let me know! I would appreciate other ideas!
Thank you for your help!
I am learning how to make an existing site, responsive and something that appears to be so simple, is making me absolutely crazy.
When I apply the max-width-480px style sheet, it is cutting off about 5 px of my left edge. You can tell it is missing because the rounded corners I added in css are cut off abruptly on the left but are nice and smooth on the right. I have spent several hours trying to tweak the wrapper and mainwrapper css and nothing seems to fix it. Any ideas?
Note: that the image for the topwrapper is a set width white background with rounded corners. Since the set sized graphic is not going to be responsive, I have removed it for the smaller screens and just added the border-radius to the mainwrapper div.
NOTE2: I tried to add an image to show you the issue, but because I am a new poster, I was unable to. The site is: www.develdesign.com/WaterWorks Please be sure to view it on your smartphone to see the issue. Thank you.
A snippet of the wrapper related divs in html
<body>
<div id="wrapper">
<div id="topwrapper"></div>
<div id="mainwrapper">
<!-- Header Start -->
<div id="header">
<div class="center">
<!-- Logo Start -->
<div id="logo"><img src="images/wworks/wwlogo239px.png" alt="logo" /></div>
<!-- Logo End -->
<div id="headerright">
<!-- Menu Navigation Start -->
<? require('top-navigation.php'); ?>
<!-- Menu Navigation End -->
</div><!-- end headerright -->
</div><!-- end center -->
</div><!-- end header -->
Regular Desktop Styles (non-responsive css)
#wrapper {
width: 100%;
max-width: 976px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
}
#topwrapper {
height: 19px;
width: 100%;
max-width: 976px;
background: url(../images/topwrapper.png) no-repeat;
}
#mainwrapper {
width:100%;
max-width: 976px;
background: url(../images/mainwrapper.png) repeat-y;
}
#bottomwrapper {
margin: 0 auto;
height: 55px;
width: 100%;
max-width: 976px;
background: url(../images/bottomwrapper.png) no-repeat;
}
.center {
margin: 0 auto;
width: 900px;
}
/* ----------------------- HEADER -----------------------*/
#header {
width: 960px;
height: 50px;
padding-bottom: 39px;
background: url(../images/bgheader.jpg) bottom center repeat-x;
margin: 0 auto;
}
#headerright {
padding-top: 20px;
width: 670px;
float: right;
position: relative;
}
#logo {
margin-top: 15px;
float: left;
width: 220px;
}
Responsive for max-width-480px
#wrapper {
width: 100%;
}
#topwrapper {
display:none;
}
#mainwrapper { /*white background for all header and maincontent */
border-radius: 5px 5px 25px 25px;
}
#bottomwrapper {
display: none;
}
.maincontent {
width: 60%;
float: left;
}
<!-- HEADER -->
#header {
/*width: 50%;*/
/*height: 50%;*/
/*background-image: none;*/
}
.center {
width: 95%;
}
#headerright{ /* includes phone numbers and full site navmenu */
display:none;
}
#logo {
width: 100%;
}
Can't say for sure but after a quick look, could it not be possible there is padding somewhere knocking it out. If so make sure to set the box-sizing attribute in your css.
Link:
Box Sizing
Also check there is no whitespace between elements, this also effects display: inline-block in such a way that two divs at 50% width won't fit next to each other. You can either set line height to 0 or comment out the whitespace.
I finally figured it out! The mainwrapper had a background image that was also a set width image (like the topwrapper). Once I realized the mainwrapper's background image repeated only y, I removed it and replaced it with a background-color of white instead and it looks great.
#mainwrapper {
width:100%;
max-width: 976px;
background: url(../images/mainwrapper.png) repeat-y;
}
I'm looking for a way to devide my screen perfectly into two divs.
One small fixed sized on the left and one with dynamic width on the right.
I didn't figured out how to do this yet.
Because the width in percentage is not proportional.
For example:
http://jsfiddle.net/acmnU/2/
If you resize the result field or the overall width you see that the green
div will not resize in proportion with the screen.
If the field gets to small the green div slips under the red one.
what I need is some kind of anchor. So that the green div fill the entire screen without
getting to big.
HTML:
<body>
<div id="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
CSS:
body {
height: 300px;
}
#content {
height: 100%;
}
.left {
float: left;
margin-left: 10px;
background-color: red;
height: 100%;
width: 200px;
}
.right {
float: left;
margin-left: 10px;
background-color: green;
height: 100%;
width: 80%;
}
I hope I have interpreted your question correctly. You can try this fiddle
body {
height: 300px;
}
#content {
height: 100%;
}
.left {
float: left;
margin-left: 10px;
background-color: red;
height: 100%;
width: 200px;
}
.right {
margin-left: 200px;
background-color: green;
height: 100%;
}
I have set the margin-left of the .right to equal that of the width of .left. But don't float the right panel and it will fill the remaining space.
I advise using a layout framework to ease this type of think. Bootstrap is a good one but there are lots of others.
If you want to do it manually, you need to give the Content class a width, and use relative positioning.
I am having an issue where the background color is behaving unexpectedly when the viewport is shrunk to a size smaller than that specified for some of my elements. While the scroll bars appear correctly the background is not what I would expect. When the viewport is as large or larger the backgrounds behave as intended. When inspecting the page elements with Firebug it seems that the body element is not stretching even though content inside of it is. What's causing the backgrounds to behave this way?
I've provided what I believe to be the pertinent html and CSS, but if I've omitted something please let me know.
Shrunk Viewport Example
Enlarged Viewport Example
CSS
html
{
background: #A37C45;
}
body
{
background:
#55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}
#container
{
width: 100%;
}
#header
{
width: 730px;
margin-left: auto;
margin-right: auto;
padding: 5px;
overflow: hidden;
}
#main
{
width: 730px;
margin-top: 2px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#footer
{
background:
url("../images/backgrounds/grass.png") repeat-x scroll left top;
clear: both;
width: 100%;
overflow: hidden;
padding-top: 30px;
margin-top: 20px;
}
#footercontainer
{
width: 100%;
background-color: #A37C45;
margin-top: -1px;
}
#footercontent
{
width: 730px;
margin-left: auto;
margin-right: auto;
padding-bottom: 25px;
overflow: hidden;
}
HTML
<html>
<body>
<div id="container">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
<div id="footercontainer">
<div id="footercontent">
</div>
</div>
</div>
</body>
</html>
The reason you're seeing this behaviour is because your width: 100% elements are only taking the viewport width as the amount of background they need to render.
You can fix it by adding a min-width declaration to your body element's CSS. Simply set it to the largest nested element's width:
body {
min-width: 730px;
background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}
min-width is not supported in IE so use the expression
body {
min-width: 730px;
background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
/* IE Version */
width:expression(document.body.clientWidth < 730 ? "728px" : "auto" );
}
I have a quick question about to how setup my basic fluid layout. I have one 40px high, and 100% wide header bar at the top, this looks great.
Then i have a #left and #right div, each floated respectively. This looks cool. They both have height 100% which works great but the issue is the page then scrolls 40px down, because there is the 40px from the header bar... if i use a fluid layout for the header and then the content box's it would look awful on a tiny or very large resolution.
Any ideas?
Here is my CSS
body
{
background: #ebebeb;
margin: 0;
padding: 0;
min-width: 750px;
max-width: 1500px;
}
#wrap
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#header
{
background: #414141;
height: 40px;
width: 100%;
}
#sidebar
{
width: 30%;
background: #ebebeb;
height: 100%;
float: left;
}
#rightcontent
{
width: 70%;
background: #fff;
height: 100%;
float: right;
}
#footer
{
width: 100%;
background: #414141;
height: 40px;
clear: both;
}
And here is my html page:
<body>
<div id="wrap">
<div id="header">
head
</div>
<div id="sidebar">
side
</div>
<div id="rightcontent">
right
</div>
<div id="footer">
footer
</div>
</div>
</body>
Does that help :)
height: 100%; is a tricky thing for web pages, as you are no doubt keenly aware. Looking at your code in Firefox 3.5.7 the #sidebar and #rightcontent columns only have only the height of about an em — just enough to hold the text you put in them, not the full page length I think you were hoping for. The columns are trying to calculate percent height from the explicit height of their parent, but #wrap also has a %-based height, which causes this to fail (at least in my Firefox).
Now, as you've described it (the columns being the right height, except for an extra 40px scroll) what seems to be happening is that whatever browser you're using is passing the full height of #wrap as 100% of it's parent, which is <body>. So naturally, when your columns are sized to the height of <body>, which also encloses the height of your header and footer, the columns are too tall.
A trick I've used a couple of times to achieve the full page length appearance of columns that scales appropriately to whatever page dimension is to stick a position: fixed; bottom: 0px; <div> tag at the bottom of my page with just enough markup inside it to mimic the structure and relevant CSS of the columns.
Here's what I did to your page to get this effect:
<!--Add this to your HTML-->
<div id='columnfooter'>
<div id='sidecont'></div>
<div id='rightcont'></div>
</div>
/* And modify your CSS like this */
#sidebar, div#sidecont {
width: 30%;
background: #ebebeb;
float: left;
}
#rightcontent, div#rightcont {
width: 70%;
background: #fff;
float: right;
}
div#rightcont, div#sidecont {
height:100%;
}
#footer {
width: 100%;
background: #414141;
height: 40px;
position: relative;
bottom: 0px;
}
div#columnfooter {
position: fixed;
z-index: -25;
bottom: 40px;
height: 100%;
background: #ebebeb;
width: 100%;
}
Yes, using the HTML to form empty background columns this way does kind of mix semantic and stylistic markup — a technical no-no. But the CSS is clearly abstracted from the HTML, and with this code I have full page columns, #footer at the bottom (even when more than a page of content is added to either column above it), and it behaves the same in the latest versions of Firefox, Safari, Opera, Chrome and IE8 at any resolution (tested down to 800x600).
Hope this helps!