I have a problem with the container-about div.
Its height is 100% because I want div occupies the entire width and height after header div.
The problem is that now I do not scroll to show the full text.
We would also like the ability to display text with scroll for tablet and smartphone.
Thanks for Your help.
<div class='header'>
<div class='header-container'>
</div>
</div>
<div class='container-wrapper'>
<div class='container-about'>
<div class='about-text'>
text comes here.....
........
</div>
</div>
</div>
link: http://ttest11234.librax.net/index.html
css:
* {
margin: 0 auto;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
font-size: 12px;
line-height: 1.5;
background: #000;
font-weight: 400;
}
.header {
top: 0px;
left: 0px;
width: 100%;
height: 100px;
position: fixed;
background: gray;
opacity: 0.8;
}
.header-container {
width: auto;
height: 100px;
margin: 0 10% 0 10%;
text-align: center;
}
.container-wrapper {
width: 100%;
height: 100%;
}
.container-about {
margin: 100px auto;
padding-bottom: 2%;
width: 100%;
height: 100%;
background: #FFF;
position: relative;
}
.container-about h3 {
padding: 0 10% 5% 10%;
font-family: 'Verdana', sans-serif;
font-size: 12px;
line-height: 150%;
font-weight: 400;
}
add overflow: scroll property in container-about class and container-wrapper class of div
.container-about {
background: none repeat scroll 0 0 #FFFFFF;
height: 100%;
margin: 100px auto;
overflow: scroll;
padding-bottom: 2%;
position: relative;
width: 100%;
}
The solution is simply to add overflow: auto to .container-wrapper. That gives you the desired scrollbar.
But now your problem is that the div is too high (it's 100% body height + 100 pixels). Give it a 100px top padding and position the header absolutely.
You should not use a fixed top margin for .contain-about, since you are going to use them on mobile devices as that would take a lot more space then desktops. Instead, you could use % or em.
set overflow-x to auto or scroll for .about-text to get your scroll bar.
Related
I don't have much knowledge about html and css and I couldn't find the answer on the internet so I am here.
Problem:
I am trying to make an image fill top part of the screen but one thing stops me from it and it's the default margin of the <body>. I've managed it by using margin: -10px; But now the image can't fill the screen by 20px, probably because there is no margin, image still thinks screen is that big.
html,body {
width: 100%;
height: 100%;
margin: -10px;
padding: 0;
overflow: hidden;
}
img {
width: 1600px;
height: 300px;
opacity: 70%;
object-fit: cover;
object-position: top 10px;
}
.cont {
position: relative;
text-align: center;
padding: 10px;
}
.main-text {
font-size: 100px;
color: white;
position: absolute;
top: 100px;
left: 70px;
}
<body>
<div class="cont">
<img src="https://i.stack.imgur.com/DWZAk.jpg">
<div class="main-text">Big Ass Title</div>
</div>
</body>
NOTE: If you have any questions or didn't understand anything about the question, please ask because I am ready for any answer. :) Thanks.
If your image is meant to be a decoration(design), then background is fine to use.
.cont can be a flex or grid element, to avoid position absolute and possible unwanted sides effects.
here an example with a background and grid:
body {
margin: 0;
min-height: 100vh; /* optionnal if it does not have a purpose */
}
.cont {
height: 300px; /* guessed from your code */
display: grid; /* default make a single column*/
background: url(https://picsum.photos/id/1015/600/300) 0 0 / cover; /* background covering */
}
.main-text {
margin-block: auto; /* vertical-centering in its row from here */
margin-inline-start:70px;
font-size: 100px; /* from your code */
color: white; /* from your code */
font-weight: normal; /* you looked for this? */
text-shadow: 0 0 1px #000; /*Optionnal increase readability*/
}
<div class="cont">
<h1 class="main-text">Big Ass Title</h1><!-- if that's a title, then make it a title ;) -->
</div>
Generally to eliminate all the margins and paddings you can add:
* {
margin: 0;
padding: 0;
}
By the way I attached a snippet where it's working as you requested. Is better to eliminate the margins than adding a negative margin, if you want to do it that way you must to compensate it in the width to achieve the 100% width intended.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
img {
width: 100%;
margin: 0;
height: 300px;
opacity: 70%;
object-fit: cover;
}
.cont {
position: relative;
text-align: center;
}
.main-text {
font-size: 100px;
color: white;
position: absolute;
top: 100px;
left: 70px;
}
<html>
<body>
<div class="cont">
<img src="https://images2.alphacoders.com/941/thumb-1920-941898.jpg">
<div class="main-text">Big Ass Title</div>
</div>
</body>
</html>
I am trying to make a semi-responsive web site project that will be viewed on an ipad. I made an html body with a max width of 800px. This works well enough for my purposes, but I also have a fixed navigation on the top with drop down menus. When the site is over 800px, it works fine, but if it scales below that, e.g to the 768 width when it is viewed vertically on the iPad, part of the menu bar sticks out a little, while the rest of the html scales proportionally with the viewport.
I am hoping the remedy is something simple. I am including a very simplified version of my code below. I removed all of the dropdown menu content since it should just be the container that has to work.
Thanks in advance! :)
<html>
<head>
</head>
<body>
<div id="page">
<header id="apu_top">some content<img src="images/chapter_cover_images/2x/ch5_apu#2x.png" width="100%"/>
</header>
<main>
<nav id="main_nav_bar_container">
<div id="main_nav_bar">
<div id="main_nav_top_div"> some content </div>
</div>
</nav>
</main>
</div>
</body>
</html>
css:
html {
box-sizing: border-box;
background-color: #888;
clear: both;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: "Roboto Condensed";
font-size: 13px;
line-height: 1.19em;
margin-bottom: 9px;
font-style: normal;
font-weight: normal;
text-align: left;
hyphens: auto;
}
#page {
max-width: 800px;
margin: 0 auto;
position: relative;
background-color: #FFFFFF;
}
#main_nav_bar_container {
width: 100%;
position: fixed;
max-width: 800px;
top: 0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
z-index: 1000;
}
#main_nav_bar {
background-color: #2580B9;
color: #F3A51D;
font-size: 1em;
height: 38px;
width: 100%;
vertical-align: middle;
}
#main_nav_top_div {
z-index: 10000;
margin-left: 4%;
}
Ok so in your screenshot I think I see the default margins on the body of 8px and right and left side.
So what you can do is adding a width calculation of 100% minus the 2 * 8px.
Remain the max-width so it will never get bigger than 800px.
#main_nav_bar_container {
width: calc(100% - 16px);
position: fixed;
max-width: 800px;
top: 0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
z-index: 1000;
}
Or instead of the width calc, you could use left: 8px; and right: 8px; :)
I'm having problem with making a div stretch and shrink depending on the size of the browser.
Here is the html
<div class="content_container">
<div class="content_menu"></div>
<div class="content_left"></div>
<div class="content"></div>
</div>
.content_container{
margin: 0 auto;
height:100vh;
display:block;
}
.content_left{
background: #eee none repeat scroll 0 0;
display: inline-block;
float: right;
padding-top: 50px;
position: relative;
text-align: center;
width: 25%;
height:calc(100vh - 50px);
}
.content_menu{
background: #eee none repeat scroll 0 0;
float: left;
height: 100px;
width: 25%;
height:100vh;
}
.content{
background: #fff none repeat scroll 0 0;
display: inline-block;
margin-bottom: 0 !important;
margin-right: auto !important;
vertical-align: top;
width: 50%;
}
I've already tried giving height:auto, 100% and 100vh but none seems to work.
The .content_left and .content_menu fall short of the height of the .content so there are blank white spaces.
Is there anyway those layers can resize themselves to fit to the height as well as the .content div.
Can anyone help me out?
Use viewport width/height to set an elements dimensions relative to the window
body {
padding: 0; margin: 0;
width: 100%;
width: 100vw;
}
div {
background: lightblue;
height: 45px;
margin-top: 20px;
}
#two {
width: 100%;
width: 100vw;
}
#one {
width: 60%;
width: 60vw;
}
<div id="one">div one</div>
<div id="two">div two</div>
I'm guessing the blank white spaces you are talking about are those surrounding the gray elements on the left and right side. Those are caused by the default margin on the body. Just set the body margin to zero.
body { margin: 0; }
Using your markup in your question, it appears to work as I think you want it to.
'
I am quite new to CSS and HTML to be honest, i've used it before but i'm not too experienced with nesting elements and such, so no doubt i'm doing something wrong here.
i want my header and footer be 10% of the page in height, and the content to be 80%
i have set the width of these elements fine and it all works using percentages, but the height just is not playing ball.
here is my html:
<body id="<%= params[:controller].parameterize %>_controller">
<div class="header">
</div>
<div class="content">
<p>lol</p>
</div>
<div class="footer">
</div>
</body>
Its very basic for the purpose of debugging the problem at hand.
The CSS:
body {
/*light gray */
background-color: #CCCCFF;
height: 100%;
width: 100%;
margin: 0;
}
h1 {
padding-top: 1em;
text-align: center;
}
h3 {
padding-top: 1em;
text-align: center;
}
/* Application layout classes */
.header {
height: 5em;
background-color: #115859;
width: 95%;
margin-right: auto;
margin-left: auto;
}
.footer {
height: 5em;
background-color: #115859;
width: 95%;
margin-right: auto;
margin-left: auto;
}
.content {
height: 50em;
background-color: #000000;
width: 95%;
margin-left: auto;
margin-right: auto;
}
Now the above shows the sizes of each element as expected 5em for header/footer and 50em for the content. I now want these as percentages:
body {
/*light gray */
background-color: #CCCCFF;
height: 100%;
width: 100%;
margin: 0;
}
h1 {
padding-top: 1em;
text-align: center;
}
h3 {
padding-top: 1em;
text-align: center;
}
/* Application layout classes */
.header {
height: 10%;
background-color: #115859;
width: 95%;
margin-right: auto;
margin-left: auto;
}
.footer {
height: 10%;
background-color: #115859;
width: 95%;
margin-right: auto;
margin-left: auto;
}
.content {
height: 80%;
background-color: #000000;
width: 95%;
margin-left: auto;
margin-right: auto;
}
The header and footer are now longer visable and the content is literally a black rectangle roughly 1 row high.
Can anybody see what i am doing wrong?
JSFiffle link: http://jsfiddle.net/4gyh6zcc/4/
You need this piece:
html,body {height:100%;}
updated sample: http://jsfiddle.net/4gyh6zcc/9/
Take a look at this:
Percentage Height HTML 5/CSS
"To set a percentage height, its parent element(*) must have an explicit height. This is fairly self-evident, in that if you leave height as auto, the block will take the height of its content... but if the content itself has a height expressed in terms of percentage of the parent you've made yourself a little Catch 22. The browser gives up and just uses the content height."
I've looked on previous SO posts and tuts but have not had any luck with my own code. My footer will not stick to the bottom of the page (not the window). I don't want content to scroll through my footer. The page sizes vary greatly in length and want to have a footer at the bottom at all times.
The leftcol, rightcol, and footer are all in the container. Any help would be awesome.
My HTML is structured as so:
<body>
<div id = "container">
<div id = "leftcol">
<h2></h2>
</p>
</div>
<div id = "rightcol">
<h2></h2>
</p>
</div>
<div id ="footer">
<p>...........</p>
</div>
</div>
</body>
Here is my CSS:
body {
font-family: 'Rokkitt', Georgia, serif;
font-size: 16px;
background-color: #FFFFFF;
line-height: 1.3em;
height: auto;
color: #252525;
}
#container {
display: block;
width: 1024px;
min-height: 100%;
margin-left: auto;
margin-right: auto;
}
#leftcol {
display: block;
float: left;
margin: 20px 5px 5px 15px;
width: 660px;
position: absolute;
height: auto;
padding-bottom: 20px;
}
#rightcol {
display: block;
float: right;
margin: 30px 5px 5px 780px;
position: absolute;
width: 275px;
height: auto;
}
#footer {
position: fixed;
bottom: 0;
width: 1024px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
}
you need to move your footer outside of the container element and the body element and use position:absolute; and bottom:0; to always fix it to the bottom of the html element.
I say outside of the body as, although majoritively the body tag takes o the height of the html element, there are some versions of IE in which this isn't the case. As you haven't pasted your HTML i obviously can't show you the revised html but you're css should look like:
#footer {
position: absolute;
bottom: 0;
width: 1024px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
}