I understand that this is quite a simple procedure, but I search for an answer every time I try to finish designing this page and none of the solutions I've found here and on Google did the trick for me.
I also understand that forcing an element to be centered is not exactly ideal, especially when there are so many different devices accessing the Internet these days, but I just want to get this done so I can focus on other issues.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Como chegar</title>
<style>
#container {
width: 800px;
height: 600px;
margin: 100px auto;
}
#content {
width: 800px;
height: 500px;
background-color: white;
}
.strips {
width: 800px;
height: 50px;
background-image: url(spritepimentarosa.png);
background-repeat: no-repeat;
float: left;
}
.navBar {
width: 250px;
height: 50px;
background-image: url(spritepimentarosa.png);
background-repeat: no-repeat;
float: left;
}
.nb1 {
background-position: 0px -450px;
margin-left: 25px;
}
.nb2 {
background-position: -250px -450px;
}
.nb3 {
background-position: -500px -500px;
margin-right: 25px;
}
.nb1:hover {
background-position: 0px -500px;
margin-left: 25px;
}
.nb2:hover {
background-position: -250px -500px;
}
.nb3:hover {
background-position: -500px -450px;
margin-right: 25px;
}
.logo {
background-position: 0px -200px;
}
.footer {
background-position: 0px -400px;
}
</style>
</head>
<body bgcolor="#D63B77">
<div id="container"><!-- beginning of container -->
<div class="navBar nb1"></div>
<div class="navBar nb2"></div>
<div class="navBar nb3"></div>
<div id="content"><!-- beginning of content -->
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.ie/maps?f=q&source=s_q&hl=en&geocode=&q=Avenida+S%C3%A3o+Camilo,+980,+Cotia+-+S%C3%A3o+Paulo,+Brazil&aq=0&oq=980,+avenida+sao+camilo&sll=-23.583184,-46.836844&sspn=92.879748,186.152344&t=m&ie=UTF8&hq=&hnear=Av.+S%C3%A3o+Camilo,+980+-+Cotia+-+S%C3%A3o+Paulo,+06709-150,+Brazil&ll=-23.583025,-46.83712&spn=0.037758,0.054932&z=14&iwloc=A&output=embed"></iframe><br /><small>Ver mapa ampliado</small>
</div><!-- end of content -->
<div class="strips logo"></div>
<div class="strips footer"></div>
</div><!-- end of container -->
</body>
</html>
If anyone can help me with this, it'd be much appreciated.
Thank you.
normally you simply add:
#content {
text-align: center;
}
another trick would be setting the width of the div and then auto margin your div:
#content {
width: 800px;
margin-left: auto;
margin-right: auto;
}
You can use on your div
margin-left: auto ;
margin-right: auto ;
Do you want to center:
Page
Content of the page
Google Maps (iframe)
Page
In order to center the page you would have to use a wrapper, a div that will surround the div with the #content id.
.wrapper or #wrapper (depends if you want to use ID or Class)
{
margin: 0 auto;
}
Content of the page
Just apply the margin to the #context.
#contet
{
margin: 0 auto;
}
Margin
Just apply margin to the iframe tag through CSS.
iframe
{
margin: 0 auto;
}
** NOTE ** Have in mind that elements need to have width assigned to them in order for this to work. You cant use width: 100%; and expect it to work, but I guess you already know this.
Related
I'm practicing with web development and I have a very weird problem with HTML and CSS.
html {
height: 100%;
}
* {
margin: 0 auto;
}
body {
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, #71c7d1, #417e8a);
height: 100%;
position: relative;
}
#banner {
right: 20%;
position: absolute;
text-align: center;
height: 50px;
width: 60%;
background-color: #3231ff;
}
#friendRequests {
position: absolute;
float: left;
height: 100%;
width: 20%;
background-color: #3231ff;
}
#friendsList {
position: absolute;
float: left;
height: 20%;
width: 20%;
background-color: #3231ff;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="chatscreen.css">
</head>
<body>
<div id="banner"><h1>Welcome to your TicTac</h1></div>
<!--<div id="friendRequests"></div>-->
<div id="friendRequests"></div>
<div id="chatScreen"></div>
</body>
</html>
As you can see, #friendsList and #friendRequests are exactly the same. Note the line after the div that has been commented out, it has the id friendRequests. When I load the page, the div doesn't show up. But here is where I get confused. If I change the id of that div to friendsList, it does show up, but those two identities have exactly the same properties (I did this just to debug, friendRequests will have other properties). I even commented the friendsList out in CSS and I even removed it, it still doesn't change. Can someone explain to me why this apparently only depends on the name of the id? Thanks!
Big Update:
Apparently the script works perfectly fine in Microsoft Edge, so the problem lies in Chrome. Using Element Inspector, I discovered that the #friendRequests is actually never loaded in Chrome!! What might be the issue here?
Both divs #friendsList and #friendRequest are set with position: absolute; and float: left;.
This means both will be aligned to the left side of the screen regardless of other elements. As a consequence, both divs are on top of each other and only one is visible (specifically the one which is defined later in html).
You should remove the position: absolute from the divs. Or make them relative, so they are aligned next to each other, depending on the order in the html.
html {
height: 100%;
}
* {
margin: 0 auto;
}
body {
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, #71c7d1, #417e8a);
height: 100%;
position: relative;
}
#banner {
right: 20%;
text-align: center;
height: 50px;
width: 60%;
background-color: blue;
position: relative;
}
#friendRequests {
float: left;
height: 100%;
width: 20%;
background-color: red;
position: relative;
}
#friendsList {
float: left;
height: 20%;
width: 20%;
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="chatscreen.css">
</head>
<body>
<div id="banner"><h1>Welcome to your TicTac</h1></div>
<div id="friendRequests"></div>
<div id="friendsList"></div>
<div id="chatScreen"></div>
</body>
</html>
The reason for this is both the div are having same css when you use the same id because of which the divs are overlapping on each other.
The id should be unique.
To understand the difference, I have shifted "friendRequests 2" block a bit left.
html {
height: 100%;
}
* {
margin: 0 auto;
}
body {
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, #71c7d1, #417e8a);
height: 100%;
position: relative;
}
#banner {
right: 20%;
position: absolute;
text-align: center;
height: 50px;
width: 60%;
background-color: #3231ff;
}
#friendRequests {
position: absolute;
float: left;
height: 100%;
width: 20%;
background-color: #3231ff;
}
#friendsList {
position: absolute;
float: left;
height: 20%;
width: 20%;
background-color: #3231ff;
}
.left_block{
left: 21%;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="chatscreen.css">
</head>
<body>
<div id="banner"><h1>Welcome to your TicTac</h1></div>
<div id="friendRequests">friendRequests 1</div>
<div id="friendRequests" class="left_block">friendRequests 2</div>
<div id="chatScreen"></div>
</body>
</html>
Thank you for answering, I found the solution. The problem wasn't the script, it was my browser apparently. Like I commented a few times, loading the page in Edge worked perfectly fine. I discovered using the debugger tool that the CSS file wasn't loaded completely for one or another reason. Thus I suspect this might be a bug in Chrome.
Simple question here but struggling with the best way to accomplish what I want... I have an image that I am trying to keep centered in the browser and responsive. Setting width to 100%, the image responds perfectly (horizontally). What I am having trouble with is the height. I do not want the browser to ever scroll and have the image, with correct ratio, at center, with 20px padding.
Dropbox viewer has a great example of exactly what I am trying to accomplish, see here: https://www.dropbox.com/s/7zmau5ckx9qe2q1/P-20131215-00017_HiRes%20JPEG%2024bit%20RGB.jpg
UPDATE BELOW WITH MORE RECENT CODE
I have a demo here of what I have so far (if you crunch the browser vertically, the scroll bar will appear): http://jsfiddle.net/k7JG5/7/
HTML
<div id="top_nav">Logo Here</div>
<div id="img_wrap">
<center><img src="http://goldenleafdesigns.com/images/random- images/soul_id_select_image1.jpg" /><center>
</div>
CSS
body {
margin: 0px;
padding: 0px;
background-color: #000;
}
#top_nav {
height: 44px;
width: 100%;
background-color: #FFF;
text-align: center;
line-height: 44px;
}
#img_wrap {
max-width: 100%;
max-height: 100%;
padding: 20px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
img {
outline: 0;
max-width: 100%;
max-height: auto;
}
so, whats the best way to accomplish the height to stay responsive with no scroll?
Maybe this works for you:
http://jsfiddle.net/4LNND/
#img_wrap {
max-width: 100%;
max-height: 100%;
padding: 20px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position:absolute;
bottom:0;
left:0;
right:0;
top:44px;
}
#img_wrap img {
outline: 0;
max-width: 100%;
max-height: 100%;
display:block;
}
There are a bit more complicated ways to do it, this is the simplest
jsBin demo
HTML:
<div id="img_wrap"></div>
CSS:
#img_wrap{
position:absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
background: url('pathToImage.jpg') no-repeat center center fixed;
background-size: contain;
}
// Or instead of contain use cover if you don't mind the image being cut-off
I'm trying to build a page with a wrapper that would be max-width: 700px
Optimally, the page would be responsive and resize the images to fit the window. I'm really having a difficult time getting the browser to resize the images and container to fit the window height. Width seems to scale just fine. Ultimately, the user wouldn't have to scroll down to see the page. Is this possible without JavaScript? If not, can someone point me in the right direction? Thanks! Code as follows:
jsfiddle: http://jsfiddle.net/LTchE/
<style type="text/css">
body, html {
height: 100%;
margin: 0px auto;
padding: 0px auto;
}
#wrapper {
height: auto;
min-height: 100%;
margin: 0px auto;
padding: 0px auto;
max-width: 600px;
background: #de291e;
}
.happyHolidays {
background: url('http://placehold.it/600x80') no-repeat center;
background-size: contain;
width: 90%;
height: 80px;
margin: 0 auto;
display: block;
}
.fromMe {
background: url('http://placehold.it/600x80') no-repeat center;
background-size: contain;
width: 90%;
height: 80px;
margin: 0 auto;
display: block;
}
.buttons {
text-align: center;
}
.snowperson {
text-align: center;
}
.snowperson img {
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="happyHolidays"></div>
<div class="fromMe"></div>
<div class="snowperson">
<img src="http://placehold.it/650x750" name="snowperson" border=0>
</div>
<div class="buttons">
<a href="javascript:NextImage()">
<img src="http://placehold.it/150x50" alt="Next snowperson">
</a>
</div>
</div>
</body>
Use the Overflow:hidden To the wrapper class
Give the Wrapper class to the overflow:hidden your scroll is hidden
The key is, in order for #wrapper to 'inherit' 100% height from the browser, all its parent elements (including the HTML tag) need to be position:relative; and height 100%;
<html>
<head>
<style>
html, body, .wrap {
position:relative;
height:100%;
margin:0;
}
.wrap {
max-width:700px;
margin:0 auto;
background:#aaa;
}
</style>
</head>
<body>
<div class="wrap">Test Text</div>
</body>
</html>
I threw it up temporarily on my server here: http://mechapps.co/fullheight/
And, here's your code: http://mechapps.co/fullheight/overflown.html
I ended up adding some styling to the wrapper:
#wrapper {
margin: 0 auto;
background: #de291e;
background-image: url('../images/snowbg.png');
background-repeat: repeat;
min-width: 600px;
max-width: 700px;
min-height: calc(690px * (90/150));
height: 90vh;
width: 150vh;
max-height: 890px;
position: relative;
}
This works relatively well for my situation... thought it's still not perfect.
You can see the final at www.ogilvypr.com/happyholidays
I am trying to create 2 side banners (left and right) with fixed positioning, and a centered container for the content.
The problem is that when minimizing the screen, the 2 side banners cover the centered container. I need a CSS solution to set the minimum width of the view to 860px; after which, the window becomes scrollable and divs do not overlap. The perfect solution is:
The HTML I am using is as such:
<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>
<div class="center" style="margin:100px 180px 0 180px;">
<div style="width:100%;">
<div style="width:500px; margin:0 auto;">
</div>
</div>
</div>
<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>
The above code prevents the left bar from overlapping the center container; but the problem is still present with the right bar.
This is a fiddle of the code: preview
You need to wrap the three DIVs in a wrapping DIV and set the min-width to prevent the overlap. This prevents it from getting narrower than the three columns. Add up the widths, set that as the minimum.
Here is a pure HTML/CSS solution for you , tell me if it is not exactly what you needed.
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color : red;
width : 400px;
margin-left : auto;
margin-right : auto;
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
height : 700px;
}
.innertubetop{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
</head>
<body>
<div id="maincontainer" style = "min-width : 800px;"> <!-- this will be sum of width of all three columns-->
<div id="topsection"><div class="innertubetop"><h1>Hello iam navigation bar</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Center Column </b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b></div>
</div>
</div>
</body>
</html>
The problem you are in is because of position: fixed; since that object is taken out of the workflow the other objects can't push it away. I was able to get a nice and fully responsive layout to work. (Let me know how it is)
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
Fixed positioned elements can overlap other elements.
Updated answer to better suit his needs (JSFIDDLE, remove the show, in the url, to see code)
Okay what I am doing here is using css media queries to change the layout.
Here is the html,
<div class="wrap">
<nav></nav>
<div class="content"></div>
<section class="lSide"></section>
<section class="rSide"></section>
</div>
Now the media query,
#media only screen and (max-width: 680px) {
.content {
width: 90%;
margin-bottom: 10px;
}
.lSide, .rSide {
position: relative;
width: 90%;
height: 100px;
margin: 10px auto;
bottom: 0;
}
}
Don't forget to add this to your head on your html file,
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
OLD answer
The CSS, (JSFIDDLE, remove the show to see code)
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: tan;
}
.wrap.active {
min-width: 750px;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20%;
background: brown;
z-index: 101;
}
.lSide {
background: #3b3b3b;
position: fixed;
left: 0;
top: 20%;
width: 200px;
height: 80%;
}
.content {
width: 300px;
height: 600px;
background: #c1c1c1;
margin: 0 auto;
position: relative;
z-index: 100;
top: 20%;
}
.rSide {
background: #3b3b3b;
position: fixed;
right: 0;
top: 20%;
width: 200px;
height: 80%;
}
.rSide.active {
display: none;
}
The JS, (updated)
$(window).resize(function() {
if ($(window).width() < '750') {
$('.wrap, .rSide').addClass('active');
}
else {
$('.wrap, .rSide').removeClass('active');
}
});
One solution I have, refer to fiddle next to css, is to remove the right side when a screen size is to small.
I have a problem with my site. I want that the shadow stops at the end of my textbox.
HTML
<body>
<div id="shadow" class="floatfix">
<div id="shadowleft"></div>
<div id="shadowtop"><img src="img/shadowcornerleft.png" alt="hoek" id="shadowcornerleft" /><img src="img/shadowcornerright.png" alt="hoek" id="shadowcornerright" /></div>
<div id="shadowright"></div>
<div id="content">
This is my CSS code:
#shadow
{
margin-left: auto;
margin-right: auto;
margin-top: 75px;
width: 974px;
}
#shadowleft
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 42px;
background-image: url("img/shadowleft.png");
background-position: top left;
background-repeat: repeat-y;
}
#shadowright
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 12px;
margin-left: 947px;
background-image: url("img/shadowright.png");
background-position: top right;
background-repeat: repeat-y;
}
#shadowtop
{
width: 892px;
height: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 45px;
background-image: url("img/shadowtop.png");
background-position: 0 0;
background-repeat: repeat-x;
}
#shadowcornerleft
{
position: relative;
left: -42px;
top: 0;
}
#shadowcornerright
{
position: relative;
left: 850px;
top: 0;
}
#content
{
width: 920px;
margin-left: auto;
margin-right: auto;
background-color: white;
border-bottom: 1px solid #cccccc;
}
I think that I have this problem because of the "height: 100%". But I don't know how to fix it.
There's a much simpler way to do this. Make a new background image 960px wide by 10px high that has your shadow at either side of it. (You may need to tweak the width to get 920px of white in the middle with the shadows down the sides)
Use your #shadow div to add that background around #content eg:
#shadow
{
width: 960px;
margin-left: auto;
margin-right: auto;
background: url(shadow-sides.png) repeat-y left top;
}
Alternatively you can probably make your #content div stretch down by adding min-height: 100%; to it and an IE6 hack:
* html #content { height: 100%; }
100% shadow height has no height to count 100% from so it uses auto mode. So so far I see 3 ways to fix problem and none of them are nice as it should be:
Setting fixed height on parent div (bad if content extends)
Use 3x3 table (but once again people say not to use tables for layout)
Use double sided shadow background image to fill content div. 1px height 974px width bg image with repeat-y; (not very elegant if site width changes)
id say that your HTML is wrong. Its bad practice to have self closing div's
wrap them around your content and use negative margin's and background positions to get the right effect that spans the height of the fluid content
this is a bit sudo, as it ripped from another site of mine, but ti should give you the basic of how it should be done
<div id="header">
<div class="wrapper">
<div class="inner">
...
</div>
</div>
</div>
#header {
height:100%;
background:transparent url(../img/left-gradient.png) repeat-y scroll left center;
margin:0 auto;
max-width:60em;
min-width:40em;
padding-left:7px;
text-align:left;
width:60em;
}
#header .wrapper {
background:transparent url(../img/right-gradient.png) repeat-y scroll right center;
padding-right:7px;
}
#header .inner {
background-color:#FFFFFF;
}