I'm working on a website that uses an older vBulletin message forum. The current setup works fine for the most part, however, when I open the forum in my mobile device, I see the ad banner (728x90) overlapping the logo image and it just looks bad. It gets even messier when looking at the banner css positioning because the top and right portions fit the needs of the rest of the layout.
My basic question is how can I redo this so that the banner doesn't EVER overlap the logo image while still holding the necessary offsets to fit the rest of the layout?
#container{
width: 100%;
height: 100px;
}
#logo{
width:230px;
height: 63px;
}
#advertisement{
height: 90px;
width: 728px;
position: absolute;
right:10px;
top: 7.5px;
}
<div id="container">
<div id="logo"><img src="logo.jpg" border="0" alt="Whatever" /></div>
<div id="advertisement"></div>
</div>
** Not my CSS or HTML
I would give #container the property "min-width: 958", and keep the width of 100%.
That way, the page will always be wide enough for both the logo and the advertisement.
Related
I have been trying to build a website having a 3 column layout. All of the body is given a margin:0 auto to keep it at the centre, and has a minimum width of 1218px.
Now, what I want to do is reposition the right column in such a way the it goes below the left column without affecting the centre column. A live example would be twitter home page, where at the left I can see my profile and trends, the centre column features the tweets and the right column shows suggestions on a 1366x768 screen, now if I change the screen size to 1024x768, the column of suggestions at right goes down below the left column but the central timeline is unaffected.
The definition would be:
<div class="containter" style="margin:0px auto;">
<div class="left-col" style="width:290px; float:left;">Left Stuff goes here </div>
<div class="center-col" style="width:590px; float:right;"> Center body </div>
<div class="right-col" style="width:290px; float:right;">right Stuff goes here </div>
</div>
Now note that the central column has a right float, copied from twitter.
I can't use media queries for that since the website is going to deal with a lot of old browsers and also I would like to avoid JavaScript if possible.
Any help?
You can't do that with "min-width" of the main container. You must use "max-width" since you want to make sure something happens when the screen width gets more narrow. And the main column (in the center) has to be left-floated, not right. Here's a possible solution. However the whole questions seems weird to me since you want to make a responsive layout in an old browser that doesn't support responsive CSS.
<style>
.container {
max-width: 1218px;
}
.leftColumn {
float: left;
width: 300px;
height: 500px;
background-color: brown;
}
.mainColumn {
float: left;
width: 700px;
height: 500px;
background-color: darkgreen;
}
.suggestions {
float: left;
width: 218px;
height: 500px;
background-color: darkorange;
}
.cleaner {
clear: both;
}
</style>
<div class="container">
<div class="leftColumn">
LEFT
</div>
<div class="mainColumn">
MAIN
</div>
<div class="suggestions">
SUGGESTIONS
</div>
<div class="cleaner"></div>
</div>
I have started to try to build a really easy website and trying to make it responsive. Something in the style of http://www.squarespace.com/ (Split up in different sections with different backgrounds etc that you just scroll throu) But i have a problem that I really cant figure out right now, I don't know how to make the foundation for this kind of site. I got the "menu" part quite nice, but as soon as I try to but some content on the first "part" or try to start the second part I run into trouble.
To try to explain I have two < p > that I tried to put on-top of the first part, and below to make the second part. I guess the explanation is not perfect, but hopefully the code can clear up my issue abit :)
Edit: Just took some random pictures to be able to show...
#logo img{
z-index: 10;
left: 4%;
top:20px;
max-width: 50%;
height: auto !important;
position: absolute;
}
#signup img{
z-index: 10;
right: 4%;
top:20px;
max-width: 50%;
height: auto !important;
position: absolute;
}
#main-container img {
width: 100%;
height: 100%;
max-height:308px !important;
position: absolute;
top: 0;
left: 0;
margin:0;
}
#second-container {
}
<div class="container">
<div id="menu">
<div id="logo">
<a href="example.com">
<img src="https://tcrf.net/images/d/de/FBEAR-nosave.png" alt="" />
</a>
</div>
<div id="signup">
<a href="example.com">
<img src="https://tcrf.net/images/d/de/FBEAR-nosave.png" alt="" />
</a>
</div>
</div>
<div id="content">
<div id="main-container">
<img src="http://www.reallifeglobal.com/wp-content/uploads/2015/03/background-radi-700x300.png" alt="" />
</div>
<p>Ontop of background</p>
<div id="second-container">
<p>Under background</p>
</div>
</div>
</div>
https://jsfiddle.net/gt2d6aa7/
Since the image in main-container is not set as a background image and it comes before the paragraphs in the source code, it is appearing on top of the paragraphs.
2 things you could do to get the paragraphs to show:
1) Set a position property on the paragraph style to make it appear on top of the image:
div.container p{position:relative;}
2) I would suggest setting that image as the background of your container and giving it a minimum height (in case your content does not increase the container size enough to fully see your image). Like so:
<div id="main-container" style="background-image:url('http://www.reallifeglobal.com/wp-content/uploads/2015/03/background-radi-700x300.png');background-size:100%;min-height:300px;background-repeat:no-repeat;">
Then, make sure to close your main-container before opening the second-container, that way it creates a clean section for different content. The way you have it, second-container is inside the main-container and any content that you wanted to appear below the main background and top content would actually just appear on top of the main-container background.
The Squarespace site you linked to is a good example visually, but if you inspect their code it gets a little confusing for a beginner, since they are nesting the bottom sections (below that video presentation) in a section within in a div.
Twitter Bootstrap has some good examples of one-page layouts with cleaner markup to follow. This is a good example: http://blackrockdigital.github.io/startbootstrap-landing-page/
Here are their other examples: http://startbootstrap.com/template-categories/one-page/
I am not an advocate of Bootstrap, since it adds a lot of unnecessary bloat in most cases, but these give a good indication of how to structure your page.
Good luck!
The best example I can find of what I'm trying to achieve with my current website project is the amazon homepage.
I want the width of a banner on my page to be 100% of the browser width, but I don't need it to resize when the window is resized. In addition, I would like the entire page to not resize and instead cut off/have scroll bars.
The banner is located at the top of the page, has a hi-res image as the background, and contains my nav bar as well as some text.
What would be the best method to set the size of my percentage based divs relative to screen resolution? Is there a way to set the size of my images without using percentages for size? (div width = screen width).
I'm having issues with divs containing text not resizing correctly, the text gets jumbled when the browser is resized. I'm using html5 and css with dreamweaver cs6.
I think this is what you want.
The header re-sizes but the content stays at a fixed size when page resizes:
https://jsfiddle.net/DIRTY_SMITH/zopnqxry/4/
<div class="header">
</div>
<div class="body">
<div class="left">
</div>
<div class="right">
</div>
</div>
CSS
body{margin: 0; overflow: scroll}
.header{width: 100%; height: 50px; background-color: lightblue;}
.body{width: 400px; height: 600px; background-color: lightgreen; margin-left: auto; margin-right: auto;}
.left, .right{width: 50%; height: 200px; float: left;}
.left{background-color: blue;}
.right{background-color: red;}
This is my first post, so please be gentle. I've searched thoroughly for an answer but had no luck - I'm sure it must be something simple but I'm running out of ideas...anyway:
I'm making a responsive site but there's an image that I want to keep at a fixed size. It took me ages to work out how to do this (by removing "max-width: 100%"), however this has had the bizarre effect of changing its alignment so it is no longer centred on the page.
How can I have both? Centred and a fixed size?
Any help much appreciated.
Oh and this is what my image css is looking like at the moment:
img {
height: auto;
min-width: 100%;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
Thanks for all your help so far - although this is still far from resolved I'm afraid. Figured I'd show my code in full as some of you have suggested, so I put it into jsfiddle. However it works absolutely fine there - the window can be resized with the image still retaining it's full dimensions and still remaining in the centre of the page. Yet with exactly the same code, when I load the 'index' page from my PC into Chrome, the image at the bottom either retains its size but drifts to the right when the window is shrunk, or it stays in the centre but shrinks to a ridiculous size. Any idea why there might be such a discrepancy?
Here's my jsfiddle anyway, which might have some clues:
http://jsfiddle.net/eggwhite/0yz6ndjh/
Thanks again.
If I understand you right, you want to add an image which should still be centered even if the parent element's width is smaller than the image. This could be done by using an image wrapper div which is pretty wide and position it accordingly. Also, the image itself should be centered in that wrapper.
In the following example, the layout has two columns, each with an image of 300x300px. If you resize the viewport (use the "Full page" view mode), the images will still be centered (see how the "x" in the placeholder images stays visible).
html, body, .column {
padding: 0;
margin: 0;
}
.column {
display: block;
float: left;
width: 50vw;
height: 100vh;
background-color: #ccf;
overflow: hidden;
}
.column + .column {
background-color: #ffc;
float: right;
}
.img-wrapper {
width: 10000px;
margin-left: calc(-5000px + 50%);
text-align: center;
}
.img-wrapper img {
margin: 0 auto;
}
<div class="column">
Column 1
<div class="img-wrapper">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="column">
Column 2
<div class="img-wrapper">
<img src="http://placehold.it/300x300" />
</div>
</div>
Can be done by wrapping the image in a <div> like so:
HTML:
<div>
<img src="..." alt="random blue sky image" />
</div>
CSS:
div {
width: 100%;
text-align: center;
}
img {
width: 250px; /* or whatever width you need the image to be */
}
Here's a demo of the code.
If that didn't help, we'll ask that you present us with the problematic code. Jsfiddle.net is an easy way to do that.
I have been banging my head against the wall trying to figure out this problem and I have looked high and low for the answer and came up with similar results.
Synopsis
The problem is that I am building a website using the 960 grid and have three columns that I want to stretch at 100% at all times. Here is a fiddle for your reference: http://jsfiddle.net/Uec7h/1/
Essentially the html is like so:
<div class="contentWrapper">
<div class="container_12">
<div class="grid_2 leftSide clearfix">
Left sidebar content.
</div>
<div class="grid_7 content">
Lots of content loaded from the server.
</div>
<div class="grid_3 rightSide">
Right sidebar content.
</div>
</div>
</div>
with the CSS being like
html, body {
height: 100%;
}
.content {
height: 100%;
}
.leftSide {
height: 100%;
background-color: #000000;
}
.rightSide {
height: 100%;
background-color: #000000;
}
.contentWrapper {
height: 100%;
}
The fiddle isn't completely accurate to what I am seeing on my local version, but it's close. Seems like the left and right sidebars do not want to expand to 100% no matter what I do.
What I've Tried
Most of the answers I have found on SO have suggested to put height: 100% on the html, body elements and everything should work out fine. Adding this attribute and giving both sidebars height: 100% did work a little bit, but if the content in the middle column gets too big, it stops at a certain point and won't continue to stretch.
I have tried adding the clearfix class that comes with the 960 grid but it didn't seem to help at all.
Question
How do I get the left and right side bars height in the fiddle to be 100% no matter what content is in the middle column?
If you add the following CSS to the sidebar elements it will fill the 100% of the height.
display:block;
height:auto;
position:absolute;
top:0px;
bottom:0px;
If you place the sidebar into a wrapper div with relative positioning, the content section will be again in it's right place...
I would also set padding and margin to 0 for the body.
EDIT:
If you add height: 100% to the .container_12 it will get a real height, and children elements can have a 100% height. Notice that the sidebars will be as height as the window itself, but your content at the middle can be taller than 100%... Fiddle
Dont know the 960 grid, the EDITED solution - using visibility: visible; -
HTML
<div id="box">
<div class="vision"> sdfsdfsd </div>
</div>
CSS
#box {
float: left;
border: 2px solid red;
}
.vision {
width: 300px;
height: 600px;
visibility: visible;
}