I’m struggling withthis of few hours new, and can’t get it right. My CSS skills a pure, so please understand.
So what I want to achieve is I have image on web site and when I change size of the browser window, image size has to adjust to a browser size, so whole image can be seen. Also image has to be in the center of the page.
Thanks for any help.
index.php:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<title>James Laycock</title>
</head>
<body>
<div id="main">
<div id="content">
<div id="image_container">
<img src="images/01.jpg" class="image" /></div>
</div></div></body></html>
style.css:
body{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;}
#main {
height: 90%;
width: 1000px;
position: absolute;
border: 0px;
padding: 0;
margin: 0 auto;}
#content{
height: 90%;
width: auto;
margin-top: 10px;
margin-right:10px;}
#image_container{
height: 100%;
max-height:100%;
width: auto;}
.image{
height: 100%;
width: auto;}
Try putting on the image container
text-align: center
And, on the actual image put height/width in percentage.
Edit: don't forget also centering the image container, or setting it's width to full screen.
Related
I have a doubt, I would like to scale the sides of my background image outside the visible width, so as to extend the background to the height that determined
To be more clear, I would like the browser to read only the width that I defined to be viewed, while the rest of the background would serve only to not leave the background spaghetti, my idea would be to extend the page down while the sides would serve only not to make the background ugly and disproportionate.
sorry my bad english.
CSS:
/* Main */
body{
margin: 0;
padding: 0;
}
.container{
position: absolute;
}
.main-logo h1{
position: inherit;
left: 0;
-webkit-text-stroke: 1.5px black;
font-size: 32px;
font-family: "8 BIT WONDER";
}
.background-img-main{
position: absolute;
width: 100%;
height: 1800px;
background-size: 0, 100%;
z-index: -100;
overflow: hidden !important;
}
HTML:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Forbidden Series</title>
<link rel="stylesheet" href="assets/styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<!--Container-->
<div class="container">
<!--Header-->
<header>
<div class="main-logo"><h1><font color="#780002">Forbidden </font><font color="#FFFFFF">Series</font></h1></div>
</header>
</div>
<img src="img/Screenshot_1.png" class="background-img-main">
<img src="img/background.jpg" class="background-media-main">
<!--Scripts-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
How I wish it were
set an height of 100% on your main container, and put and overflow:auto rule
.container{
position: absolute;
height:100%;
overflow:auto;
}
also, you want to set off the body and html overflow
body,html {
overflow:none;
}
I try to put a container on top of a background image. The content of this container will be images. Unfortunately I can't get the container stick to to background-image if I resize the browser window.
Is there way that a container always stays at the same place but also scales together with the background-image? Let's say the background-image is 1000x1000px and the container on top is 500x500. On a smaller browser the images scales down to lets say 500x500px. Now the container and its content should also scale down 50% but should stay at the same place.
This is what I have so far (it's just an example):
body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: Arial, sans-sarif; font-size: 10px; }
#background_image {
background-image: url("http://ws2-media1.tchibo-content.de/newmedia/art_img/MAIN_ALT_3-IMPORTED/4113906f0b0eab32/regal-weiss.jpg");
max-width: 55.3em;
width: 100%;
max-height: 47.1em;
height: 100%;
background-size:contain;
background-repeat: no-repeat; }
#container { background-color: #FF0004; max-width: 5em; width: 100%; max-height: 5em; height: 100%; position: relative; left: 40%; top: 55%; }
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unbenanntes Dokument</title>
<style>
</style>
</head>
<body>
<section id="background_image">
<div id="container"></div>
</section>
</body>
</html>
Thank you very much in advance.
What i would do is media queries
#media screen and (min-width: 480px) {
#background_image{
}
#container {
}
}
depending on what size of the screen is u need to position the #container and give the right width of the #background_image
This is where i learn
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
So, the issue is rather obvious. Now I've two elements in div containers, that should abut one another, but because of lack of css skills I need your help. So, the code is rather primitive.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Новый формат общения</title>
<html>
<link rel="stylesheet" type="text/css" href="center_ribbon.css">
<link rel="stylesheet" type="text/css" href="center.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
.center {
top: 50%;
left: 50%;
width: 310px;
height: 50px;
position: absolute;
margin-top: -155px;
margin-left: -25px;
}
</style>
<body>
<div class="center"><div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>foo</h1></strong><div class="ribbon-stitches-bottom"></div></div></div>
<div class="wrap"><div class = "lifted">
<p>footext</p></div></div>
</body>
</html>
So, the corresponding code of css as follows
center_ribbon.css
html, body {height:100%;}
.wrap_ribbon {
position:relative;
width:50%;
margin: 0px auto ;
height:auto !important;
height:100%;
min-height:100%;
}
.contentdiv_ribbon {
display:block;
position:fixed;
margin-top: 200px;
margin-left: 170px;
}
center.css
html, body {height:100%;}
.wrap {
.center {
top: 50%;
left: 50%;
width: 260px;
height: 50px;
position: absolute;
margin-top: -25px;
margin-left: -130px;
}
}
As you can rightly notice, here is mess of code, sorry for that. I'm new to css and other web stuff and just poking around. Any improvements would be appreciated.
UPD. Added my page http://jsfiddle.net/7xZLM/5/
Try this:
<head>
<style>
.main {
margin: 0 auto;
}
.column {
float: left;
width: 40%;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<div class="column">DIV 1</div>
<div class="column">DIV 2</div>
</div>
</body>
Click JSFiddle
It's hard to know what you're asking. It sounds like you want 2 divs that sit next to each other. If so, you're wanting to look at float in CSS.
simplified example
CSS
.col1 {
float: left;
}
HTML
<div class='bold col1'> foo</div>
<div class='col2'>footext</div>
An absolutely positioned element is positioned relative to the first parent having position other than static, if none is there it'll be positioned relative to the initial container, <html>
In your code .wrap doesn't have a positioned parent so it'll be positioned relative to the document, top:50%` will position the div 50% below the top of document...
Update
Since .wrap is positioned relative to the document, it's position changes with the height of the page, while the ribbon will stay at the top of the page, causing space between them.
Wrapping them inside a positioned parent will fix the issue.
check this JSFiddle
And from what i understood, you need the .wrap to look like it's coming out from the ribbon, for that you can apply an z-index less than the ribbon to .wrap,
as in this Updated JSFiddle
I've used the search function and it just will not center as I cannot make sense of some suggestions and those I can do not work. Google leaves me no results either.
I want to use 1 div as a 'background as such' so that the first 150px of the screen down are blue.
Then I want the logo in a centered box 950px wide by 150px down.
The 'logo div' (I've called it headercontent) needs to be 'on top' of the headerbackgroundblue div, which I have managed.
However it will not center the box within that div (950px wide centered will store all content so that it looks good on all screens, however the blue is 1920px wide to make the website look better on larger resolutions.
CSS
body {
padding: 0;
margin: 0;
}
.headercontent {
z-index: 2;
position: absolute;
height: 150px;
width: 950px;
margin-right: auto;
margin-left: auto;
}
.bluebackgroundtop {
height: 150px;
width: 1920px;
margin-right: auto;
margin-left: auto;
background-color: #3c56a6;
z-index: 1;
position: absolute;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kleenzone - Commercial Cleaning Services</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="bluebackgroundtop"></div>
<div class="headercontent">
<H1> KLEENZONE </H1>
</div>
</body>
</html>
You need to have the .headerContent inside of the .bluebackgroundtop div, and then style like this:
* {
padding: 0;
margin: 0;
}
.headercontent {
height: 150px;
width: 950px;
margin:0 auto;
text-align:center;
}
.bluebackgroundtop {
height: 150px;
width: 1920px;
margin:0 auto;
background-color: #3c56a6;
}
DEMO
I am attempting to make a standard website layout with a header, a navigation bar a body (on the right of the navigation bar) and a footer.
Now I have so far done this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.header {
float: top;
width: 100%;
height: 75px;
}
.navbar {
float: left;
width: 20%;
height: 100%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.footer {
float: bottom;
width: 100%;
}
</style>
</head>
<body>
<div class="header"> Header </div>
<div class="navbar"> Nav Bar </div>
<div class="body"> Body </div>
<div class="footer"> Footer</div>
</body>
</html>
which produces this:
Now if we check the CSS:
.navbar {
float: left;
width: 20%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
As you can see I have tried to set the height and min-height of both the body and nav bar to fill the remaining vertical space i.e:
Yet it doesnt affect it. However if I do height: 500px it resizes like expected (of course this now wont be very good practice as different screen sizes etc would show a different portion or view of the page):
So basically I am asking how would I be able to make the divs fill the vertical space that's left over without using some hard-coded value i.e 100px rather I would want to do it in percentages thus the page will look the same on all browsers
add this code to your body,html:
body,html{
height:100%;
}
and make your navbar <div id="navbar"> instead of <div class="navbar">
then add height: 100%; to your navbar
#navbar{
height:100%
// rest of your code
}
Same to your content
call it something like content, because body is already used.
#content{
height:100%
// rest of your code
}
now all the divs will have a height of 100% so the full browser height.
EDIT: your full code would look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
width: 100%;
height: 75px;
}
#navbar {
float: left;
width: 20%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#content {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#footer {
width: 100%;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
Use absolute positioning for each content block (header, footer, sideber, body), and for the body and nav-bar divs, set both top and bottom position properties, rather than specifying the height property. This will force them to fill the remaining viewport height.
More detail here
...and for supporting IE5 and IE6, here's an improved version using only CSS (no javascript).