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; :)
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'm trying to learn HTML/CSS and working on a nav bar, however, I am experiencing a scaling problem. This is the website in full screen.
This is the website minimized a bit.
Then this is the website minimized all the way.
As you can tell when I scale the website around into different scales then the proportions mess up and things begin to overlap. I have tried making the children absolute while keeping the containers relative. I am also using em's for measurement and not using pixels. What can I do to keep everything proportional while scaling?
This is the js fiddle
https://jsfiddle.net/2w1r136j/2/
HTML
<div class="container">
<header>
<nav>
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Westworld_Logo.svg/2000px-Westworld_Logo.svg.png" alt="logo">
<div class="leftNavContainer">
Home
Story
</div>
<div class="rightNavContainer">
Characters
Create
</div>
</nav>
</header>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #222;
font-size: 1em;
}
.container {
width: 100%;
height: 100%;
position: absolute;
}
header {
background: white;
height: 3.5em;
}
.logo {
height: 4.5em;
width: 4.5em;
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
margin-top: 0;
}
.leftNavContainer {
position: absolute;
float: left;
}
.leftNavContainer a {
position: relative;
display: inline;
margin-right: 2em;
margin-left: 2em;
}
.rightNavContainer {
float: right;
}
.rightNavContainer a {
position: relative;
display: inline;
margin-right: 2em;
margin-left: 2em;
}
Well Media queries might work, but a much better implementation would be using Flexbox or better CSS Grid.
I've updated the fiddle with a flexbox implementation.
https://jsfiddle.net/khpv2azq/3/
HTML
<head>
<title>
Westworld
</title>
<link rel="stylesheet" href="css/style.css">
</head>
<div class="container">
<header>
<nav>
<div class="leftNavContainer">
Home
Story
</div>
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Westworld_Logo.svg/2000px-Westworld_Logo.svg.png" alt="logo">
<div class="rightNavContainer">
Characters
Create
</div>
</nav>
</header>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #222;
font-size: 1em;
}
nav{
display: flex;
justify-content: space-between;
}
.container {
width: 100%;
height: 100%;
}
header {
background: white;
height: 3.5em;
}
.logo {
height: 4.5em;
width: 4.5em;
position: absolute;
left: 50%;
margin-left: -50px !important;
/* 50% of your logo width */
display: block;
margin-top: 0;
}
.leftNavContainer {
}
.leftNavContainer a {
position: relative;
display: inline;
margin: 4px;
}
.rightNavContainer {
}
.rightNavContainer a {
position: relative;
display: inline;
margin: 4px;
}
Also MDN resource for Flex box -
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Hope this help! 😇
You can use media queries to change sizes at breakpoints
ex:
#media only screen and (max-width: 600px) {
body {
font-size: .7em;
}
}
https://jsfiddle.net/2w1r136j/7/
However, you might consider using the media queries to incorporate a responsive design which will work for mobile.
A common idiom is to collapse the menu items into full width elements, and to bump up the font size.
something like: https://jsfiddle.net/2w1r136j/40/
This is only happening in Chrome, not Firefox or IE -
I have three images with text overlayed. The three images are responsive, and take up the full width of the browser window. Here's a screenshot:
When I resize the window to make it narrower, somehow, the html is becoming smaller than the size of the page. For example, here:
This only happens very quickly before the window seems to readjust, and everything is fine. However, I'd still like to fix it.
I've tried using a flexbox footer instead of the vh method but that didn't help.
My HTML and CSS are below. A note about the HTML - I'm sure there is another way to get the three pictures to fit together without any whitespace besides cramming the HTML all together like it is - sorry for being a hack. But that's not the source of the problem, as far as I can tell - it happens when there is only one picture as well.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="styles/index-footer-test-750.css" type="text/css" rel="stylesheet">
<title>Good Boy Dog Care</title>
</head>
<body>
<div class="index-content">
<div id="we-love-dogs-one"><img id="we-love-dogs-one-image" src="images/cute-dog-one-cropped.jpg"><div id="we-love-dogs-one-text"><p>WE</p></div></div><div id="we-love-dogs-two"><img id="we-love-dogs-two-image" src="images/cute-dog-two-cropped.jpg"><div id="we-love-dogs-two-text"><p>LOVE</p></div></div><div id="we-love-dogs-three"><img id="we-love-dogs-three-image" src="images/cute-dog-three-cropped.jpeg"><div id="we-love-dogs-three-text"><p>DOGS</p></div></div>
</div>
<div class="footer">
</div>
</body>
</html>
And CSS:
* {
box-sizing: border-box;
margin: 0;
}
.index-content {
min-height: calc(100vh - 2em);
padding: 0;
margin: 0;
}
.footer {
height: 2em;
background-color: rgba(240, 100, 60, 1);
width: 100%;
cursor: default;
}
#we-love-dogs-one {
width: 34%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
}
#we-love-dogs-one-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-one-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 17px);
font-size: 1.5em;
display: inline-block;
font-family: "Montserrat";
}
#we-love-dogs-two {
width: 33%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
font-family: "Montserrat";
}
#we-love-dogs-two-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-two-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 24.5px);
font-size: 2em;
display: inline-block;
font-family: "Montserrat";
}
#we-love-dogs-three {
width: 33%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
}
#we-love-dogs-three-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-three-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 17px);
font-size: 1.5em;
display: inline-block;
font-family: "Montserrat";
}
Any help would be appreciated. Thanks!
cliffgallagher# , try using divs to auto resize rather than hardly setting the width or height per image, here is an example post: How do I auto-resize an image to fit a div container.
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
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.
I'm working on making my pet project web app responsive, but I can't get the page to display properly in mobile browsers. My page is basically constructed as a container div, header, navigation bar (which moves from the side to the top when going from desktop to mobile), and a main content div, and all went as expected until I tested on an iPhone (both Safari and Firefox) - the header and nav bar displayed properly, but the content div is way too big and breaks the page. Here are some screenshots to show you what I mean (iPhone/Safari at default zoom, iPhone zoomed out to show the full page, and equivalent window size in Firefox).
Confusingly, this only seems to affect the main content div (.list), as the header and navigation bar still display at the intended size, but I'm having a hard time seeing anything in the code that would make it behave differently.
Relevant HTML:
<!DOCTYPE html>
<html>
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
...
</head>
<body>
<div id="container">
<div id="logoheader"><h1>...</h1><h2>...</h2></div>
<div class="buttonbar">...</div>
<div class="list">
<h3>...</h3>
<div class="maintable">
...
...
</div>
</div>
</div>
</body>
</html>
Relevant CSS:
body {
height: 100%;
width: 100%;
}
#container {
position: relative;
top: 0;
margin: 0 auto 10px auto;
width: auto;
max-width: 1250px;
min-height: 600px;
white-space: nowrap;
}
#logoheader {
width: auto;
min-width: 888px;
height: auto;
display: block;
}
.buttonbar {
position: absolute;
left: 18px;
width: 90px;
display: inline-block;
}
.list {
position: absolute;
left: 108px;
right: 20px;
min-height: 490px;
min-width: 750px;
display: block;
vertical-align: top;
white-space: normal;
}
.maintable {
font-size: .875rem;
width: auto;
min-height: 406px;
}
#media screen and ( max-width: 600px ) {
#container {
max-width: auto;
min-height: auto;
}
#logoheader {
min-width: auto;
width: 100%;
height: 40px;
}
.buttonbar {
position: relative;
top: 0;
left: 0;
right: 0;
width: 100%;
height: auto;
}
.list {
position: relative;
left: 0;
right: 0;
min-height: auto;
min-width: auto;
width: 100%;
}
.nontable {
min-height: auto;
}
}
In your CSS styling for .list
.list {
position: absolute;
left: 108px;
right: 20px;
min-height: 490px;
min-width:750px;
display: block;
vertical-align: top;
white-space: normal;
}
remove the min-width:750px and you're good to go :)
Just add display:inline to your media query for the .list!
I tested it in responsive layout:
As you can see the portrait layout has display: inline and the landscape doesn't, just to show you the difference!