I'm rying to create a website with only horizontal scrolling. Please take a look at this demo. My problem is when I resize the browser, the content(the paragraph inside the light yellow box) doesn't reposition. I want that paragraph to be positioned above the yellow ring segment. How can I do that?
Below is my code.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>
<body>
<div id="container">
<img id="backimage" src="images/rings.png" />
<div id="info">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubia
</p>
</div><!-- end of info -->
</div><!-- end of container -->
</body>
</html>
CSS
a { text-decoration:none; }
li {list-style-type:none; }
body { overflow-y:hidden; }
#container {
position:absolute;
height:100%;
width:10000px;
background-color:#FC9;
}
#info {
position:absolute;
width:200px;
height:220px;
background-color:#FFC;
top:180px;
left:250px;
}
#backimage {
position:absolute;
height:100%;
background-size:cover;
bottom:0;
}
I tried setting #info's position as relative but when I do that, it disappears from the page.
what would you like to happen with the content? cause with the current parameters it doesnt matter if the position is relative or absolute, it will stay 180px down and 250px in from backimage upper left corner... also its size won't change.
You are defining every position as absolute. This is not a good solution. Instead you should use relative layouts. They may be a bit more complicated and not as "free", but they do solve most of the problems. Delete backImage and container from you HTML and do something like this:
a { text-decoration:none; }
li {list-style-type:none; }
body {
overflow-y:hidden;
background:url(images/rings.png);
background-color:#FC9;
}
#container { //body is the container. You dont need something like this in this case.
}
#info {
background-color:#FFC;
//width and height are dynamic to the size of content
margin-top:180px; //You just set the margin (outer gap) instead of the position.
margin-left:250px;
}
#backimage { //You don't need a back-image if you use background:url(...) in body
}
If you want the outer gap of the box to get smaller if window is smaller use percentages with margin.
If you want to limit the size of information div use max-width:xyz;
As I read in your comment to the other answer you want the div be over a specific part of the background. You can achieve this with background-position.
Related
I am creating a website, but when i try to scroll, the page stays fixed. I can see the scroll bar moving up and down but the page isn't moving. I changed the screen height and width but it didn't change anything. The only way the page actually scrolls the way it is supposed to is when I change the different sections I have on my page from "fixed" position to relative. When I change it to relative though, the entire screen gets distorted and everything gets out of place. My code basically consists of different sections, which are all in the fixed position(I am sure that the position is the problem) and inside the sections, I have text and images(all fixed position). How do I fix this?
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Home|Cloudberrie</title>
<style>
#top{
background-color:#E7E5DF;
height:3rem;
width:100%;
position:fixed;
top:0;
left:0;
z-index: -1;
}
#logo{
background-color:white;
height:3.5rem;
width:100%;
position:fixed;
z-index:-1;
top:48px;
left:0;
}
#banner{
background-color:white;
height:7rem;
width:100%;
position:fixed;
z-index:-1;
top:100px;
left:0;
}
.button{
border:none;
background-color:#1f88ca;
padding: 20px 40px;
font-size: 16px;
cursor: pointer;
display: inline-block;
border-radius:18px;
width:200px;
position:fixed;
top:400px;
left:100px;
color:white;
letter-spacing: 3px;
}
button:hover{
background-color:red;
}
#choose{
background-color:white;
height:30rem;
width:100%;
position:fixed;
z-index:-1;
top:550px;
left:0;
}
html {
height: 100%;
width: 100%;
overflow:auto;
padding-bottom:2000px;
}
</style>
</head>
<body >
<section id ="top">
<p style="position:fixed; right:1800px;bottom:880px;"><i class="fa fa-location-arrow" aria-hidden="true"></i> Plano, Texas</p>
<p style="position:fixed; right:1650px;bottom:880px;"><i class="fa fa-phone" aria-hidden="true"></i> (123) 456 7890</p>
<p style="position:fixed; right:1460px;bottom:880px;"><i class="fa fa-envelope" aria-hidden="true"></i> support#gmail.com</p>
</section>
<section id="logo">
<img src="berrylogo.png"height="25"width="25" style="position:fixed;left:10px;top:56px;">
<img src="cloudberie.png"height="30"width="150" style="position:fixed;left:40px;top:56px;">
<p style="position:fixed; right:350px;top:65px;">Home</p>
<p style="position:fixed; right:275px;top:65px;">About</p>
<p style="position:fixed; right:180px;top:65px;">Services</p>
<p style="position:fixed; right:110px;top:65px;">Client</p>
</section>
<section id ="banner">
<img src="banner-3.png"width="100%" height="450px">
<h1 style="font-family:sans-serif;color:#1f88ca;position:fixed; top:180px;left:100px;">MAIN TEXT</h1>
<p style="font-family:sans-serif;color:grey;position:fixed; top:250px;left:100px; font-size:40px;">Lorem ipsum dolor sit amet, consectetur </p><br><p style="font-family:sans-serif;color:grey;position:fixed; top:290px;left:100px; font-size:40px;">adipiscing elit, sed do eiusmod tempor.</p>
<button class="button">Learn More</button>
</section>
<section id="choose">
<p style="font-size:2.5rem;color:#5e5e5e;position:fixed;top:630px;text-align:center;left:760px;"> <b>WHY CHOOSE US</b></p>
<div style="width:80px;height:3px;border:1px; background-color:#25ace4;position:fixed;top:700px;left:890px;"></div>
<img src="why-us-pic.jpg"width="300px;"style="position:fixed;top:800px;left:425px;">
<p style="font-size:1rem;position:fixed;top:800px;left:800px;">At consectetur lorem donec massa sapien faucibus et molestie ac. Molestie ac feugiat sed lectus vestibulum. Faucibus pulvinar elementum integer enim. Eu consequat ac felis donec et odio. Ac ut consequat semper viverra nam libero justo laoreet sit. Condimentum vitae sapien pellentesque habitant morbi.</p>
</section>
</body>
</html>
Fixed elements do not move on page scroll. That is why they were made. So to fix it, do not set position to fixed. Here is position:fixed defined by MDN:
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
Here is an example of position:fixed:
for(let i=0;i<100;i++){
document.body.innerHTML+="<p>normal positioning</p>"
}
#fixed{
position:fixed;
}
<!DOCTYPE html>
<html>
<body>
<p id="fixed">fixed text</p>
</body>
</html>
Given the small amount of detail I have, I think what you are looking for is absolute instead of fixed. That being said, manual positioning of elements is generally not good practice. If this doesn't work try adding more information like code snippets and screenshots
I have a container containing any number of inline-block div tags.
Is it possible to get just a single one of these inline-block tags (actually, the last one that appears) to center align itself in the remaning space without using a radically different setup? The width of the div I need centered is unknown, and needs to fit to its contents.
Here is an example: http://jsfiddle.net/Zewav/
I'd like to get #message centered between #sidebar and the remaining space of #container
Not as far as I'm aware unfortunately. I'm not sure you need anything "radically different"; you will need to change your markup very slightly, though it is entirely possible to do exactly what you're asking. It's difficult to offer a solution without knowing a little more about the context.
For instance, if you just wanted the content of the div to be center aligned then I'd suggest text-align:center;. If you want to have a background on the centered element then just nest another div/span etc inside. If you're really stuck then please explain a little more of what the purpose is, and I'll try to help you come up with a solution. Here's a solution based off that:
HTML
<div id="container" class="cf">
<div id="sidebar"></div>
<div id="message">
<span>hello world</span>
</div>
</div>
...Content after
CSS
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
#sidebar {
width:200px;
height:400px;
background-color:red;
float:left;
}
#message {
display:block;
text-align:center;
}
#message > span {
padding:10px;
background:blue;
display:inline-block;
color:white;
}
Here, I float only the #sidebar. The #message div then takes up a display:block and using text-align:center, center-aligns the nested span within. You'll notice that I'm also using the micro clearfix hack, .cf as you'll need to clear your floats afterwards.
Edit: I just changed the span to be inline-block, and added a padding to demonstrate that it's working.
http://jsfiddle.net/feitla/Zewav/8/
I am assuming you are asking how to align the next between the sidebar and "content" within the container. You'll need to play around with the padding, but note how the text is aligning in the middle between sidebar and content.
<div id="container">
<div id="sidebar"></div>
<div id="content">
<div class="message">Lorizzle ass dolor sit fo, mofo we gonna chung dang.</div>
<div class="message">Nullam sapien velit, aliquet yippiyo, suscipizzle its fo rizzle, gravida vel, arcu.</div>
<div class="message">Pellentesque shizznit tortizzle.</div>
<div class="message">Sizzle eros. Fusce izzle ghetto dapibizzle you son of a bizzle tempizzle fo shizzle my nizzle.</div>
<div class="message">Maurizzle mah nizzle nibh yo turpis. Vestibulum izzle tortor.</div>
<div class="message">Pellentesque uhuh ... yih! rhoncizzle yo mamma.</div>
<div class="message">In hac habitasse platea dictumst. .</div>
<div class="message">Shizzle my nizzle crocodizzle dapibizzle.</div>
<div class="message">Curabitur tellizzle urna, pretizzle eu, mattizzle ac, daahng dawg vitae, nunc.</div>
<div class="message">Pizzle suscipizzle. Shizznit semper velit sizzle purus.</div>
</div>
<div class="clear"></div>
</div>
#container {
background:yellow;
width:100%;
position:relative;
}
#container > div {
display:block;
}
#sidebar {
width:200px;
height:400px;
background-color:red;
float:left;
}
#content {
margin:0 auto;
position:relative;
margin-left:200px;
padding:0 20px;
}
.message {
background-color:blue;
}
.clear {
clear:both;
}
I'm making myself a website but I'm a little stuck on an issue I am having.
Inside a div I have a block of text with variable height.
At the right side of the text I want to position an image width a variable width & height. It has to be aligned to the bottom
Above the image may not come any text.
It needs to be like this: https://www.dropbox.com/s/pqpttrvefrvci52/example.jpg
Here is the code I'm currently having:
HTML:
<div id="section">
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.
Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.
</p>
</div>
CSS
#section {
position: relative;
}
#image {
float: right;
margin-left: 20px;
position: absolute;
bottom: o;
right: 0;
}
With this code the image is aligned to the bottom right corner of the div, but the height of the div is lower then the height of the image.
Also the text just goes through the image.
you need a couple of things to fix this.
1) add padding-right to the section so it does not overlap with the image.
#section {
position: relative;
padding-right:<at least image width so the text doesn't overlap>
}
2) when you add a div and float in it, the float remove the image from the flow of the document so you need to add another internal div with the same height or make the height of the div the same height as your image or just add a floater div..
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<div style="clear:both"></div>
</div>
Here is a working solution: http://jsfiddle.net/zV3wm/
I can think of a way with variable image widths and text amounts, but it requires some duplication in the markup.
The gist is that you right-float a hidden version of the image, and then use overflow:hidden so that the paragraph against the float doesn't flow under it. Then, we use absolute positioning to place the non-hidden version of the image at the bottom of the container.
I have prepared a mockup at http://jsfiddle.net/UmGNZ/ (I have given the hidden image partial opacity, so you can see where it's being added to the document), but for a pseudo-HTML example:
<container with position:relative>
<right-float>
<hidden img tag with opacity: 0 />
<actual img tag with absolute positioning, bottom: 0, right: 0 />
</right-float>
<p with overflow:hidden (or auto) />
</container>
You could also try a pure CSS solution using CSS tables if you don't have to support IE7, but otherwise this should work down to IE6 if you use visibility:hidden in favour of opacity, and add a zoom:1 to the paragraph style.
This idea which allows a flexible image size: http://jsfiddle.net/David_Knowles/F3zZU/4/
.cell {display:table-cell;}
#section {
position: relative;
width:300px;
}
#image {
vertical-align: bottom;
}
<div id="section">
<div class="cell">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.</p>
</div>
<div id="image" class="cell">
<img src="http://placeimg.com/120/80/any" alt="image"/>
</div>
</div>
I dont thing I am correct but you can achieve that by float right and margin-top.
#img {
float: right;
margin-top: -140px;
}
Check this out: http://jsfiddle.net/wrujx/
I think best solution is to use a little bit of jQuery (JavaScript) and let each part do its job keeping it as simple as possible. Here's what you'd have:
HTML
<div id="wrapper">
<p>yourtexthere</p>
<img src="whatever.jpg"/>
</div>
CSS
#wrapper{
width:600px;
border:1px solid #000000;
}
p{
display:inline-block;
margin-right:20px;
}
img{
vertical-align:bottom;
}
jQuery
var parentWidth = $('#wrapper').width()
var imgWidth = $('img').width()
$('p').width((parentWidth - imgWidth) - 20)
And there you go plain and simple without extra tags and messy positioning.
i have a simple css example, and i can't understand the behavior of one of my divs, when the horizontal scroll is displayed. so...when my browser window needs to display the horizontal scroll(when the window width is less than my div "content" width(1024px)), my div "footer" (that have the same "content's" parent and 100% width), seems to get an "extra blank space" on the right side. this space grows when I reduce the width of the window. any ideas about how can i get it off, or why it happens??thanks!
heres my code:
css:
<style type="text/css">
html, body {
height: 100%;
width:100%;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
font-variant:normal;
}
* {
margin: 0;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#content{
width:1024px;
margin:0px auto;
background-color:#990;
height:780px;
}
.footer, .push {
height: 4em;
width:100%;
}
#footer-content{
height:10px;
background-color:#09F;
width:100%;
}
</style>
html:
<body>
<div class="wrapper">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque varius tortor vitae pretium. Quisque magna ipsum, accumsan sit amet pretium sed, iaculis feugiat nibh. Donec vitae dui eros, eu ultricies nulla. Morbi aliquet, nisi in tincidunt rutrum, nisl justo sagittis nisi, nec dignissim orci elit vitae tortor. </p>
</div>
<div class="push"></div>
</div>
<div class="footer" style="background-color:#900; width:100%;">
<div id="footer-content"></div>
</div>
</body>
I'm going to go with this is a side effect of having a statically defined width for your content DIV and having the footer width be defined as 100%.
If you notice the width of the 100% width section always corresponds to the visible width of the window, whereas the statically defined section always remains a static size (as you would expect). When the window size increases the 100% width section expands to fill that size. When the window size contracts it contracts to only fill that window. In that last case where the window goes below 1024px the static DIV stays at 1024 and the dynamic DIV decreases to fit the window, so you get the scroll bar at the bottom because you have the static content outside the visible width of the window. You scroll to the side and the dynamic div remains the same size, that being the visible width of the window and then you see white space next to it.
One solution would be to make the 1024 section a percentage width, say 80%, that way it contracts and expands with the bottom section. Either that or set min-width:1024px on your 100% section.
As a followup to this question on absolute positioning within a table cell, I'm trying to get something working in Firefox. Once again, I'm about 95% there, and there's just 1 little thing that's keeping me from declaring victory. Using the follow sample markup:
<!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" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
table { width:500px; border-collapse:collapse}
th, td { border:1px solid black; vertical-align: top; }
th { width:100px; }
td { background:#ccc; }
.wrap { position:relative; height:100%; padding-bottom:1em; background:#aaa; }
.manage { text-align:right; position:absolute; bottom:0; right:0; }
p{ margin: 0 0 5px 0; }
</style>
</head>
<body >
<table>
<tr>
<th>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero.</th>
<td><div class="wrap"><p>Cras diam.</p><div class="manage">Edit | Delete</div></div></td>
</tr>
<tr>
<th>Cras diam.</th>
<td><div class="wrap"><p>Cras diam.</p><div class="manage">Edit | Delete</div></div></td>
</tr>
<tr>
<th>Cras diam.</th>
<td><div class="wrap"><p>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero. Sed elementum. Praesent porta, tellus ut dictum ullamcorper, est ante condimentum metus, non molestie lorem turpis in sapien. Aenean id enim. Nullam placerat blandit ante. Aenean ac ligula.</p><div class="manage">Edit | Delete</div></div></td>
</tr>
</table>
</body>
</html>
How can I get the wrap div to always fill the cell, so that the management area sits at the bottom of the cell? And yes, the data that I am putting in the table is (in my mind) tabular, so I would like to use a table here. As a last resort, I may turn to an ugly nested div solution, but since a table is semantically correct here I'd like to use one if possible. Note that the background colors are simply to show the relative sizes of the elements - I don't care about background for my layout. Also note that I'd like the cells to have a flexible height, so that they only expand enough to fit their content.
You could put (the same) fixed height on the table cell & wrap div thusly:
<style type="text/css">
table { width:500px; border-collapse:collapse}
th, td { height:200px; border:1px solid black; vertical-align: top; }
th { width:100px; }
td { background:#ccc; }
.wrap { position:relative; height:200px; padding-bottom:1em; background:#aaa; }
.manage { text-align:right; position:absolute; bottom:0; right:0; }
p{ margin: 0 0 5px 0; }
</style>
Are you just trying to get the backrground to match the same colour? and not alignment, then you can use a background image in css to give the same effect, cos FF does not render the element to 100% inside a container. If the container is set on auto height, then the child will be set to auto too. The makes the rendering faster.
So the best bet would be a css background image.