Hi I am trying to create a responsive layout where I have three different size elements and I want an equal margin on both sides of middle element for all screens.
Here is my HTML and CSS
<section class="container">
<div href="/" class="pull-left logo"><img src="/images/logo.jpg"></a>
<div class="slogan pull-left"><img src="/images/slogan.jpg"></div>
<div class="pull-left support"></div>
</section>
<style>
.pull-left
{
float-left;
}
.slogan
{
margin: 0 17%;
}
</style>
Since logo and support sections are of fixed size. Above Css works fine for one resolution but as screen size goes down the margin doesn't remain same.
Any ideas how to achieve that?
EDIT: Here is the fiddle. http://jsfiddle.net/VdYua/22/
Initially there is an equal margin on both side of .slogan div. But on re size last div goes to next line. I want the margin to be decreased without braking layout.
Are you looking for something like this?
HTML:
<div class="centered">This is some content in the centered DIV</div>
CSS:
.centered { background: #888; margin: 0 auto; width: 50%; }
Using margin: 0 auto will center the elements horizontally, meaning that it will have "Equal margin on both sides"
You do have to set a width on elements when using the above method, but as shown you can use percentage widths (as I image you may well be for a responsive layout)
You cannot however use this technique on floated elements, so you may be looking to add something like this to your CSS:
.container { margin: 0 auto; width: 50%; }
If I have misunderstood your question please let me know.
EDIT: In response to the comment below I think I have managed to achieve what you're looking for, see this fiddle
HTML:
<section class="header">
<div href="/" class="logo"><img src="/images/logo.jpg" /></div>
<div class="slogan"><img src="/images/slogan.jpg" /></div>
<div class="support"></div>
</section>
CSS:
.header { padding: 0 50px 0 300px; position: relative; }
.logo, .support { background: red; height: 50px; position: absolute; top: 0; }
.support { background: blue; right: 0; width: 50px; }
.logo { left: 0; width: 300px; }
.slogan { background: black; height: 50px; margin: 0 auto; width: 50px; }
The positioning/padding aspect of things isn't particularly pretty (if the width of .support or .logo change, you have to change that in the css) however I think this is the only safe way of doing it with pure HTML/CSS in a cross browser way (I'd be interested to see anyone elses take on it though), the important this is that it works and is completely valid.
Related
I'll start by saying that I am very very new to web development as a whole and that this is my very first responsive site so please be gentle and bear this in mind, I am the definition of the word noob at this stage. Having searched for an answer for a while and having no luck I'm hoping that someone here could help me out.
I'm trying to make a homepage for this website. The design is simply a block down the left hand side of the page showing the logo at the top and then a series of links underneath, all of which is on the same background. To the right of this is one big image which fills the rest of the screen. I want the whole page to fill the browser window of whatever device it is viewed on so absolutely no scrolling is necessary, i.e. width and height both 100% of the viewport. The width of the page is giving me no grief at all, sweetly adjusting to different screen sizes as I want it, with the sidebar at 20% of the width and the main image at 80%.
The height is a different story however. I can't seem, in any combination of CSS I've tried so far, to be able to get the height to behave at 100% of the viewport. Either the sidebar is too short and the main image is too long or both are too long etc etc. The main image I want to keep the aspect ratio of and just have it overflow it's div as required to keep most of it displayed and the side bar I just want to fit to 100% of the page height. Here is my code at present:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
#page
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#sidebar
{
float: left;
width: 20%;
height: 100%;
padding-bottom: 10;
margin: 0;
background: url(/Images/bg.jpg);
}
#slideshow
{
float: right;
width: 80%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#logoimg
{
width: 80%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
}
#mainimg
{
width: 100%;
overflow: hidden;
}
.link
{
font-family: courier;
font-size: 1.3em;
text-align: center;
padding-top: 7%;
padding-bottom: 1%;
color: rgba(255,255,255,1.00);
}
#font-face
{
font-family: courier;
src: url(/courier_new-webfont.ttf);
src: url(/courier_new-webfont.eot);
src: url(/courier_new-webfont.woff);
}
</style>
</head>
<body>
<div id="page"><!--Whole page container-->
<div id="sidebar"><!--Side bar container-->
<div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div>
<div class="link" id="homelink">Home<!--Home link--></div>
<div class="link" id="aboutlink">About<!--About link--></div>
<div class="link" id="gallerylink">Gallery<!--Gallery link--></div>
<div class="link" id="priceslink">Prices<!--Prices link--></div>
<div class="link" id="reviewslink">Reviews<!--Reviews link--></div>
<div class="link" id="contactlink">Contact<!--Contact link--></div>
<div class="link" id="clientslink">Clients<!--Clients link--></div>
</div>
<div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container-->
</div>
</div>
</body>
</html>
Any help with this would be really appreciated and don't hesitate to point out any massively amateur mistakes. I'm willing to take any criticism and learn from it. Thanks
Here’s just a simplified code example of the HTML:
<div id="welcome">
your content on screen 1
</div>
<div id="projects">
your content on screen 2
</div>
and here’s the CSS using vh:
div#welcome {
height: 100vh;
background: black;
}
div#projects {
height: 100vh;
background: yellow;
}
From Here: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
It works for me.
I have made you a basic set up to show how you would style this. The best way that I have found to set the height to 100%is with the use of jQuery/Javascript. You can find the height of the window and then input that into the css with the use of it.
The way this works is the var wH = $(window).height(); is finding the height and turning that into a number. Then when you use $('.sideBar').css({height: wH}); you are inputing the height into the css of sideBar.
jQuery
function windowH() {
var wH = $(window).height();
$('.sideBar, .mainImg').css({height: wH});
}
windowH();
This function I wrote is giving those two elements the height of the window. This will allow those two elements to be 100% of any browser's window.
I also recommend turning that nav into a ul which I included in the fiddle to show how that is possible.
JSFIDDLE (Remove 'show' at the end of the url to see code)
The next thing you will need to research is media queries to adjust the content to adapt better to mobile devices. Consider changing the sideBar to a horizontal nav when on mobile devices.
If you want a pure CSS only approach then you can do something like this,
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
By adding height&width to 100% in your html/body you can then use height: 100% on other elements to fill the entire page.
Refer to this JSFIDDLE to see how it works.
Helpful read about responsive web design
On Chrome, just adding display: flex on the body is enough.
On Firefox, you must add height: 100vh to get the desired result. And a margin: 0 will get rid of the annoying scroll bars.
<body style="display:flex; height: 100vh; margin: 0;">
<div style="background-color: red; flex:1;"></div>
<div style="background-color: green; flex:2;"></div>
<div style="background-color: blue; flex:1;"></div>
</body>
Sample code for exact Covering the page height.
HTML
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
Main content
</div>
</div>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
max-width: 1020px;
margin: auto;
height: 100%;
background: #ddd;
padding:16px;
box-sizing:border-box
}
.header,.content{
background:#fff;
padding:16px
}
.content{
margin-top:16px;
min-height:calc(100% - 160px);
}
Example Link :
https://codepen.io/rahdirs/pen/jeRVod
I have an image in my website that is defined with the following CSS:
#settings_big{
border: none !important;
margin: auto 0 0 0 !important;
padding: 0 !important;
float: right;
}
Because of the float the image obviously sits on the right side of the content. The top margin causes the image to sit right beneath the lowest hanging element in the content. This looks OK, but I would really prefer that the image sit as low as possible in the browser window to somewhat frame the content. I've seen multiple examples that use fixed positioning to achieve this, and this would work, however my content has a max and min width of 960px; using a fixed position of
bottom: 0;
right: 0;
causes the image to get pushed far right outside of the content to the edge of the browser window. Is it possible to push the image to the bottom of the browser window while keeping the
float: right;
positioning? I would rather not use JavaScript or jQuery but it is an option I suppose. Thanks in advance.
New answer:
<div class="container contentCont">
<div id="content"></div>
</div>
<div class="container imageCont">
<div id="image"></div>
</div>
With CSS:
.container {
width: 200px;
margin: 0 auto;
background: #ccc;
}
.contentCont {
min-height: 600px;
}
.imageCont {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
#image {
float: right;
width: 20px;
height: 20px;
border: 4px solid red;
}
Does it right as in this JSFiddle: http://jsfiddle.net/WYX7H/1/
The following might be close to what you need.
Assuming that your page layout vaguely looks like the following HTML:
<div class="wrapper">
<p>some words...</p>
<div class="slot">
<img src="http://placehold.it/200x200">
</div>
</div>
apply the following CSS:
.wrapper {
width: 600px;
height: 600px; /* for demo only, not critical... */
margin: 0 auto;
border: 1px solid blue;
}
.slot {
text-align: right;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -301px;
width: 600px;
border: 1px dotted blue;
}
.wrapper img {
vertical-align: top;
}
See demo at: http://jsfiddle.net/audetwebdesign/6Xnxj/
If you don't know the width of the image (or you don't want to specify it),
create a wrapper that matches the width of the parent element and apply position: fixed to it.
The image can then be either floated or text-aligned to the right within the fixed block.
The fixed block can then be positioned to the left and bottom, and using margin-left
to keep it centered.
I need to space four images aligned horizontally evenly in a row. I am aware that this has been asked many times here, yet none of the solutions I found have worked for me. They all seem to rely on either a fixed width for the row, or a fixed width for the images. I need to specify both in percentages.
My Html:
<div id="tabBar">
<div id="PDiv">
<img id="Person" src="images/icons/tabBar/image0.png">
</div>
<div id="SDiv">
<img id="Sale" src="images/icons/tabBar/image1.png">
</div>
<div id="CtDiv">
<img id="Current" src="images/icons/tabBar/image2.png">
</div>
<div id="FDiv">
<img id="Food" src="images/icons/tabBar/image3.png">
</div>
<span id="Stretch"></span>
</div>
The CSS
#tabBar
{
position: fixed;
bottom: 0;
left: 0;
background-color: #F3F3F3;
width: 100%;
text-align: justify;
}
#PDiv, #SDiv, #CDiv, #FDiv
{
background-color: #F3F3F3;
width: 24%;
vertical-align: top;
height: auto;
display: inline-block;
}
#Stretch
{
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}
The issue with this method is that I am building a mobile hybrid app. Therefore, it will have to work on many screen sizes. Currently it looks great on larger screens and computers, but on phones with smaller-sized screens, either the images begin to get cut off, or one of them goes and makes a new line. Instead, I need the images to just scale down and stay evenly spaced.
Have you tried scaling your images with CSS, like so:
img {
width: 100%;
height: auto;
}
This will prevent you images of creating new lines, or being cut off.
EDIT:
jsfiddle link: http://jsfiddle.net/ATube/
You have a mismatch in your CSS classes (#CtDiv vs #CDiv). This leaves CDiv as a block element.
If I may suggest though... the whole 'stretch' thing is unnecessary and the 24% just puts you into rounding errors. I'd recommend something more like this:
HTML
<div id="tabBar">
<div id="PDiv"></div>
<div id="SDiv"></div>
<div id="CDiv"></div>
<div id="FDiv"></div>
</div>
CSS
#tabBar {
position: fixed;
bottom: 0;
left: 0;
background-color: #F3F3F3;
width: 100%;
height:40px;
}
#PDiv, #SDiv, #CDiv, #FDiv {
background-color:#F3F3F3;
background-size:contain;
background-repeat: no-repeat;
background-position:center center;
width: 25%;
vertical-align: top;
display: inline-block;
float:left;
height:100%;
}
#PDiv {
background-image:url(images/icons/tabBar/image0.png);
}
#SDiv {
background-image:url(images/icons/tabBar/image1.png);
}
#CDiv {
background-image:url(images/icons/tabBar/image2.png);
}
#FDiv {
background-image:url(images/icons/tabBar/image3.png);
}
Generally, this should be somewhat lighter weight, but more importantly... allow you better separation of style and structure.
Even made you a fiddle:
http://jsfiddle.net/F6khC/
This is my first time on this forum and ill try to be clear as possible, i have a problem with creating a small website for my own, specifically with the header. Im trying to create a page which has a wrapper of 1024px center (margin: 0 auto;) and i would like 2 divs, on both sides of this wrapper where i can use another picture as background. My current css looks like this:
body, html
background: url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
margin: 0;
padding: 0;
}
#wrapper
margin: 0 auto;
width: 1024px;
}
#header {
width: 1024px;
height: 254px;
background-image: url(../images/header2.png);
background-repeat: none;
position: relative;
}
#header_right {
width: 50%;
right: 0;
background-image: url(../images/header_right2.png);
position: absolute;
height: 254px;
}
#header_left {
width: 50%;
left: 0px;
background-image: url(../images/header_left.png);
position: absolute;
background-position: right;
margin-left: -512px;
height: 254px;
}
and my html looks like:
<body>
<div id="header_right"></div><!--End header right!-->
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
</body>
What i'm trying to accomplish is to have a header that continues on both left and right (both headers use different backgrounds), in this case it does work on the left, because im using a negative margin, since i use 50% width and exactly the half of the wrapper (-512px), this works, but if i would try to use a negative margin on the right (margin-right: -512px) this will extend the page on the right with an extra 512px, which is not my intention.
I've been googling all day but can't seem to find any answer to my question, also tried to make 3 divs with float: left , but couldnt figure out how to make 1 in the center with a width of 1024px and the rest 100% width, if anyone could help me out that would be really appreciated.
Kind regards
I am not entirely sure how you want it to look like, but I'll give it a shot.
If I'm way off, perhaps you could provide me with a schematic of sorts?
In any case, the example given below does not use your specific code, but it should give you an idea of how it's done.
Result:
The left and right headers are "infinite", in that they always fill the entire page's width.
The middle header covers up the rest. If you've got background images you can use background-position to position them so that they align with the middle header's left and right edges.
Code | JSFiddle example
HTML
<div class='side_wrapper'>
<div class='left_header'></div><div class='right_header'></div>
</div>
<div class='header'></div>
<div class='content'>
Content here
</div>
CSS
.header, .side_wrapper, .left_header, .right_header{
height: 100px;
}
.header, .content{
width: 400px;
margin: 0 auto;
}
.side_wrapper{
width: 100%;
white-space: nowrap;
}
.left_header, .right_header{
width: 50%;
display: inline-block;
}
.left_header{
background-color: blue;
}
.right_header{
background-color: lightblue;
}
.header{
position:absolute;
top: 0;
left: 50%;
margin-left: -200px;
background-color: red;
}
.content{
background-color: green;
text-align: center;
}
You want the two header out of the wrappper and aside of it right?
If im right, try this:
<body>
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
<div id="header_right"></div><!--End header right!-->
</body>
and :
display: inline; float: left;
in each element(header-left, header-right, wrappper), and get out of the negative margin
In you divs use float:left; this should mean that within a wrapper as long as there is enough space they will float next to each other for example
css:
#divWrapper
{
width:500px;
float:left;
background-color:red;
}
#divLeft
{
width:250px;
float:left;
background-color:blue;
}
#divRight
{
width:250px;
float:left;
background-color:green;
}
Html
<div id "divWrapper">
<div id = "divLeft">content here</div>
<div id = "divRight">content here</div>
</div><!--this is the end of the wrapper div -->
A really good tool to use for manipulating css is Firebug in Firefox https://getfirebug.com/
if you want a centre div try this:
http://jsfiddle.net/kzfu2/1/
I have the following standard markup:
<body>
<header><div class="wrapper">Header</div></header>
<div id="create">create something</div>
<div class="wrapper">Content</div>
<footer><div class="wrapper">footer</div></footer>
</body>
and style:
.wrapper {
width: 920px;
margin: 0 auto;
padding: 0 20px;
text-align: left;
}
The thing I am having difficulty with is positioning the "create something" button, I would like it positioned as shown below...
The important points to note are that the button extends to the right into infinity, and it always takes up a width of "4 squares" of the centralised area, no matter what the browser width.
Any advice would be appreciated, thanks.
One element for the button and another element for the line that goes into the infinity and beyond..
The infinity element is partially hidden under #wrap or #header element's background.
http://jsfiddle.net/lollero/62wcV/1
CSS:
#wrap {
width: 400px;
margin: 0px auto;
background: #ffffff;
position: relative;
z-index: 10;
height: 600px;
}
#button,
#button_line {
position: absolute;
top: 40px;
right: 0px;
height: 20px;
background: #3a99ff;
}
#button {
width: 100px;
}
#button_line {
left: 50%;
z-index: 5;
}
HTML:
<div id="button_line"></div>
<div id="wrap">
<div id="button"></div>
</div>
I'm not going to say this is the best way, but it works for me.
<div style = "background:red;position:relative;left:50%;right:0">
<div style = "background:green;position:relative;left:120px;right:0">
Your button here!
</div>
</div>
The first div just gives you a reference to the centre of the page. The second is the 'button' where the left is offset by however much you want.
When creating buttons with CSS, always calculate the width, height, paddings and margin. it helps to give accurate box size to fit any particular container. check out this post. http://www.phcityonweb.com/tutorial/css-programming-lessons/margin-padding Also check out their positioning tutorials.