No matter what I do, I cant get my website to center when looking at it in the browser :/. I've looked all over google/youtube and tried everything. Getting very annoyed with it at this point.
Heres the code:
<!doctype html>
<html>
<head>
<title>01_Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Save for Web Styles (01_Home.psd) -->
<style type="text/css">
<!--
#Table_01 {
overflow: hidden;
min-width: 1600px;
}
#id01-Home {
position:relative;
width:1600px;
height:8226px;
margin:0 auto;
}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0; margin-right: 0px;">
<!-- Save for Web Slices (01_Home.psd) -->
<div id="Table_01">
<div id="id01-Home">
<img src="images/01_Home.jpg" width="1600" height="8226" alt="">
</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
I suggest you apply the following styles to your BODY tag:
text-align:center;
And then create an outer container (say DIV.container) with the following styles:
text-align:left;
width: 50%;
margin: 0 auto;
Remove all other styles until you have that working then re-add any styles that you require.
Here is an example:
https://jsfiddle.net/wshobaqh/
(sorry, I can't work out how to apply a snippet into SO)
For screens wider than 1600px (which seem to be your only concern) you can simply add margin: 0 auto; to #Table_01 to center it. But below that width you'll need a completely different approach.
Details depend on your actual content and layout which is not visible in your code - or is that image really your only content? If yes, I'd suggest to use percentage values for width (like 100% width for the image and its parent elements) to be able to view the whole image on smaller screens.
Related
I am trying to make a horizontally scrolling website, the difficulty i am facing is to fix my page's height to the device's. Furthermore, if i fix the height's value in the css then it becomes hard coded for that particular screen size, so whenever i open the page on a differently sized monitor the hard coded value creates trouble. I have used a very basic css till now, here it is :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style media="screen">
#body {
width: 4000px;
height: auto;
max-height:100vh;
}
</style>
<title></title>
</head>
<body id=body>
--\\CONTENT GOES HERE \\--
</body>
</html>
This should give you what you are looking for. You can add an overflow-yproperty as well just to be sure y scrolling is disabled. Just make sure the rest of your content is responsive so that it can resize with the view height.
#body {
width: 4000px;
height: auto;
max-height: 100vh;
overflow-y: hidden;
}
I want to have a <div> in my <body> that is 95% of the page's width and height. I want this <div> to be centered on all sides, such that a 2.5% margin exists on all sides of the <div>. The attached code almost works, but the top has no margin, such that the <div> extends all the way to the top of the page. I am using a reset. Can anyone offer some insight as to why this isn't working as intended?
The most important thing for me here is that I have no interest in working with non-relative measurements. I am coming from a background in Android development and believe that anything I make should scale to (almost) any screen size.
I would also like to say that I am just starting with HTML/CSS/JS and at this moment have no intention of supporting browsers that do not comply with the W3C standard (IE). Furthermore i would like to avoid anything that seems like a hack or a workaround.
The CSS Reset in case your interested: http://79.170.44.85/rasmussenprojects.com/reset.css
A hard copy since I can only post 1 link and it seems best to link to the reset:
<!doctype html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
html, body{
background-color:rgb(25,25,25);
height:100%;
width:100%;
}
.content-panel{
background-color:rgb(50,50,50);
width:95%;
height:95%;
margin:auto;
}
</style>
</head>
<body>
<div class="content-panel">
</div>
</body>
</html>
div{
background: lightgray;
bottom: 0;
height: 95%;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 95%;
}
<div>
content
</div>
My take would be that you just give the body a padding: 2.5% (and don't forget position:relative).
The div then should just fill up all available space with position:absolute;top:0;right:0;bottom:0;left:0;
In general I also would work with box-sizing:border-box
i want to cover this image at full width size but it's not fitting properly, please help how to fit it properly here is an image.
http://postimg.org/image/u53oikyc5/
and here is my source code.
<html>
<head>
<title>
Select your college from list.
</title>
<style>
#img{
width: 950px;
height: 350px;
}
</style>
<body>
<div id="img">
<img id="img" src="images/college_name.jpg" alt="Select_your_college"/>
</div>
</body>
</head>
</html>
Give min-width: 100% to <img />.
first of all use .img img{width:100%} then
try using css reset:
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others.
The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.
In other words, this is a starting point, not a self-contained black box of no-touchiness.
http://meyerweb.com/eric/tools/css/reset/
I consider myself to give this answer, i used this:
#img{
width: 102%;
z-index: 0;
height: 350px;
overflow: hidden;
padding: 0px;
margin-top: -9px;
margin-left: -8px;
margin-right: 9px;
}
You need to reset margin and padding of your html and body to zero to get your image touched to the browser's initials.
CSS:
body,html{
margin:0;
padding:0;
}
img.fullwidth{
min-width:100%;
}
HTML:
<html>
<head>
<title>Full width Image</title>
</head>
<body>
<img class="fullwidth" src="url/to/your/image.jpg"/>
</body>
</html>
I'm using margin: 0 auto; to center the contents of my pages.
Recently I discovered that using an automatic margin on a body has the same visual effect as an automatic margin on a (wrapper) div.
<!DOCTYPE>
<html>
<head>
<style>
div#wrapper {
margin: 0 auto;
width: 60%;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- Rest of page. -->
</div>
</body>
</html>
Compared to;
<!DOCTYPE>
<html>
<head>
<style>
body {
margin: 0 auto;
width: 60%;
}
</style>
</head>
<body>
<!-- Rest of page. -->
</body>
</html>
It seems better as it removes an (unneccesary) element.
Are there any pitfalls that need to be considered when using this approach?
I don't recommend it. Setting margin on the body boxes you in needlessly, and you end up using negative margins and absolute positioning to break out.
Stick with your container (or wrapper) model - it's widely considered a best practice. Check the source for this and any other professionally designed site and you'll see the same.
I use the auto margin on the body all the time. You just have to remember that if you want to set a background for the page, you have to set it to the html tag, as people often set the page background on the .
I have to write markup and CSS so that a background image doesn't produce a scrollbar. Only if the viewport is more narrow than the inner content wrapper, a scrollbar is created:
http://www.mcm.unisg.ch/
Doesn't work for me: Absolutely positioned div on right causing scrollbar when the left doesn't.
One of may vain attempts in a fixed layout:
#background {
width: auto;
margin-left: -75px;
margin-right: -75px;
}
An area that hang out of the containing block to the left (because of a negative margin) isn't reachable by scrolling to the left. Yes! But a negative margin-right creates a scrollbar in
case of a narrow viewport. How can I prevent the scrollbar as long as the viewpart is wider than the containing block?
The markup:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title> </title>
<link rel="stylesheet" type="text/css" href="css/general.css" media="screen, projection"/>
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/general-ie.css" media="screen"/>
<![endif]-->
</head>
<body>
<div id="page">
<img id="background" src="images/visual.jpg" alt="" />
<div id="head"><h1>Page title</h1></div><!-- /#head -->
<div id="mainpart">
<ul id="zones">
<li>
<ul>
<li class="module">Modul #1</li><!-- /#module -->
</ul>
</li>
</ul><!-- /#zones -->
<hr />
</div><!-- /#mainpart -->
<div id="foot"><h1>Footer</h1></div><!-- /#foot -->
</div><!-- /#page -->
</body>
</html>
The CSS rules:
body {
background: #000;
color: #000;
}
#page, #mainpart {
background: #fff;
}
#page {
width: 1024px;
margin: 0 auto;
position: relative;
}
#background {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: auto;
margin-left: -75px;
margin-right: -75px;
}
Can anybody give me some good adivce? Thank you.
To prevent scrollbars appearing use:
mySelector
{
overflow: hidden;
}
You can see it in all its glory here: jsFiddle example.
This quite an old post, but for all the Googlers out there:
This question (https://stackoverflow.com/questions/13326111/element-outside-container-without-creating-scrollbars) has some really good answers for this. If I understand your requirements.
You can do this with either a "fake body" element, or using breakpoints to just hide the content when the viewport is too small.
Both are straightforward options. If the content in you "hanging" panel only makes sense when you can see all/most of it, then the breakpoint option can save you some bandwidth, and possibly save the user some frustration.
To elaborate on the "fake body" option hinted on by mediaashley, it means to wrap your content including the overflowing element in an element like this:
#fakeBody {
width: 100%;
min-width: 1000px; // needs to match the main content’s width
overflow: hidden;
}
The width:100% means it will match the window’s width, but when the window gets smaller than min-width its overflow:hidden attribute will cut off the hanging-out content.