Hi guys this might be a easy question but I'm struggling a bit with this one problem in my HTML and CSS page.
Problem: When i zoom int the "Section" part moves under the nav and when i zoom out the footer moves next to the section part.....
Here is the sample of my HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyWebsite</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<header>
Header
</header>
<body>
<nav>
<ul>
<li>
Tab1
</li>
<li>
Tab2
</li>
<li>
Tab3
</li>
<li>
Tab4
</li>
<li>
Tab5
</li>
</ul>
</nav>
<section id="">
Section
</section>
<footer>
Footer
</footer>
</body>
</html>`
here is the CSS page:
header
{
width: 1325px;
height: 150px;
background-color: green;
position: relative;
}
nav
{
position: relative;
width: 400px;
height: 500px;
background-color: teal;
float: left;
overflow: hidden;
}
section
{
position: relative;
float: left;
width: 925px;
height: 500px;
background-color: blue;
}
footer
{
float: left;
width: 1325px;
height: 50px;
background-color: lime;
position: relative;
overflow: hidden;
}
thanks for your help and time in advance
Your body tag needs to be before the header. Add a wrapper with a width to your HTML/CSS.
Here is a fiddle: http://jsfiddle.net/msJLW/
<div id="wrap">
<header>
Header
</header>
<nav>
<ul>
<li>
Tab1
</li>
<li>
Tab2
</li>
<li>
Tab3
</li>
<li>
Tab4
</li>
<li>
Tab5
</li>
</ul>
</nav>
<section id="">
Section
</section>
<footer>
Footer
</footer>
</div>
#wrap{
width:1325px;
}
header
{
width: 1325px;
height: 150px;
background-color: green;
}
nav
{
width: 400px;
height: 500px;
background-color: teal;
float: left;
overflow: hidden;
}
section
{
float: left;
width: 925px;
height: 500px;
background-color: blue;
}
footer
{
float: left;
width: 1325px;
height: 50px;
background-color: lime;
overflow: hidden;
}
Jack is correct, and you might want to try adding a container to your elements. See this fiddle: JSFiddle. Essentially, they are all
position: relative
without having an absolutely positioned container to refer to. Adding a wrapping container with the CSS:
position: absolute;
height: 700px;
width: 1325px;
Kept everything in line. Let me know if this wasn't what you were trying to achieve!
I'm not entirely sure why it is moving like this, but I know a simple solution: contain it all in a wrapper. Copy/paste this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyWebsite</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrapper">
<header>
Header
</header>
<nav>
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
</ul>
</nav>
<section id="">
Section
</section>
<footer>
Footer
</footer>
</div>
</body>
</html>
Keep in mind that anything not included in the <head> tags should be inside the <body> tags, except your doctype and <html> tags -- this includes your <header> tags.
Anyway, what we've done above is wrap everything in a "div", a means by which we can divide a web page up. They are easy to control using css, and you should copy/paste the following to the bottom of your css file:
.wrapper {
width: 1325px;
}
Let me know if you need any more help :D
Related
I'm trying to implement a dropdown inside a scrollable container. The problem I have is that the options, when expanded, are clipped inside this container. I know this is a recognized problem with scrollable containers, but to this day I don't know a good solution for it. Here's the problem:
I need these pink options to pop out of the container. Is this possible without keeping them outside of the container?
Here's the snippet:
document.getElementById('dropdown-button').addEventListener('click', () => {
document.querySelector('.dropdown-options').classList.toggle('hidden');
});
.scrollable {
width: 200px;
height: 400px;
background: yellow;
overflow-y: auto;
}
.filler {
background: orange;
height: 350px;
}
.dropdown {
position: relative;
}
.dropdown-options {
background-color: pink;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
}
.hidden {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Overflow</title>
</head>
<body>
<div class="scrollable">
<div class="filler"></div>
<div class="dropdown">
<button id="dropdown-button">Expand me</button>
<ul class="dropdown-options hidden">
<li>Option one</li>
<li>Option two</li>
<li>Option three</li>
</ul>
</div>
<div class="filler"></div>
</div>
</body>
</html>
Any chance for a CSS-only solution?
I am trying to put nav and img elements next to each other on top of the page.
I am putting both elements in the top_bar container.
I have tried setting the top_bar to display: inline-block;, reducing the width of nav and floating it to left and also floating the img to right. Then I have tried combinations of those, but nothing gives me the result I want. Either the elements start to jump around or the logo is put below the top_bar border.
How can I have nav and img inline and both above the top_bar bottom border?
EDIT: I also want the nav element to be positioned left-most of the page, and img right-most.
<!DOCTYPE HTML>
<html>
<head>
<style>
#top_bar {
border-bottom: 1px solid silver;
}
nav ul li {
display: inline-block;
}
img {
width: 130px;
height: 30px;
}
</style>
</head>
<body>
<div id="top_bar">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<img src="cs_logo.png" alt="Image not found"></img>
</div>
</body>
</html>
Add display: flex; to #top_bar
#top_bar {
border-bottom: 1px solid silver;
display: flex;
justify-content: space-between;
}
nav ul li {
display: inline-block;
}
img {
width: 130px;
height: 30px;
}
<div id="top_bar">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<img src="cs_logo.png" alt="Image not found"></img>
</div>
<!DOCTYPE HTML>
<html>
<head>
<style>
#top_bar {
border-bottom: 1px solid silver;
display: flex;
flex-direction: row;
align-items: center;
}
nav ul li {
display: inline-block;
}
img {
width: 130px;
height: 30px;
}
</style>
</head>
<body>
<div id="top_bar">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<img src="cs_logo.png" alt="Image not found"></img>
</div>
</body>
</html>
We can use CSS flex properties to achieve this. But please make sure that you are using vendor prefixes for cross browser compatability.
Your code is missing some declarations.
At first your class #top_bar should have a width declaration.
To make things easyier you could use a class instead of only declare
the image size.
Here´s a fiddle of your code that i´ve modified: https://jsfiddle.net/Thorske/nyv6mwgz/
Modified css:
* {
margin : 0:
padding : 0;
}
#top_bar {
margin : 0 auto;
width : 100%;
border-bottom: 1px solid silver;
}
.clear {
clear : both;
}
nav {
float : left;
width : 80%;
}
nav ul li {
display: inline-block;
}
.img_container {
float : right;
width : 20%;
}
.img_conatiner img {
width: 130px;
height: 30px;
}
Modifed html:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="top_bar">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<div class="img_container">
<img src="cs_logo.png" alt="Image not found" />
</div>
<div class="clear"></div>
</div>
</body>
</html>
There only simple changes:
the #top_bar has now a defined width.
nav has now a defined width and float.
added the class "img_container" with defindet width and float
which contains the image.
the class clear keeps everything were it is supposed to be.
Since i don´t know if you want to make your code "responsiv" you´ve
to set your values for "width" yourself.
I am in process of building an AMP HTML mobile template with a CSS only menu. It has to be CSS only as the AMP HTML standards do not allow any javascript. I am sure this will help others in building an AMP HTML page with a nice menu.
I have a very basic version coded. But for some reason the menu is not appearing when I cleaned the code to be AMP. I know this is probably super simple but it is completely evading me. I put a super shortened version of my page below any help would be appreciated.
For quick reference the only errors the code below will throw from the AMP HTML debugger is the fact that I have multiple style tags, I know that is the case, I am just using them for organization purposes before combining them once in my platform.
Thanks for any help!
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="canonical" href="">
<!-- AMP Requirements Begin -->
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- AMP Requirements End -->
<!-- Main Style Begin -->
<style>
body {
margin: 0px;
}
#main-container {
border: 1px solid #3f3f3f;
width: 100%;
}
#header-wrapper {
border: 1px solid #3f3f3f;
width: 100%;
}
#header-wrapper span {
float: right;
display: inline-block;
}
#header-wrapper span a {
display: block;
}
/* Nav Bar Begin */
#navbar-container ul {
list-style-type:none;
margin: 0px;
padding: 0px;
}
#navbar-container ul li {
margin: 0px;
padding: 0px;
display: inline;
}
/* Nav Bar End */
</style>
<!-- Main Style End -->
<!-- Menu CSS Begin -->
<style>
#main-navigation {
/* Collapsed */
width: 0;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
height: 100%;
background: #12E444;
&:after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 34px;
}
}
#main-container {
float: right;
}
#main-navigation:target + #main-container {
width: 80%;
#main-container {
width: 80%;
left: 20%;
}
#header-wrapper {
width: 80%;
left: 20%;
}
</style>
<!-- Menu CSS End -->
</head>
<body>
<!-- Mobile Nav Chunk Begin -->
<nav id="main-navigation">
<ul>
<li>Close Menu</li>
<li>Menu item Long Maybe Long</li>
<li>Menu item Long Maybe Long</li>
<li>Menu item Long Maybe Long</li>
<li>Menu item Long Maybe Long</li>
<li>Menu item Long Maybe Long</li>
<li>Menu item Long Maybe Long</li>
<li>Menu item Long Maybe Long</li>
<li>Menu item Long Maybe Long</li>
<li>Menu item Long Maybe Long</li>
<li>Menu item Long Maybe Long</li>
</ul>
</nav>
<!-- Mobile Nav Chunk End -->
<!-- Main Wrapper Begin -->
<div id="main-container">
<!-- Header Wrapper Begin -->
<div id="header-wrapper">
<span>Call US 303-999-9999</span>
<amp-img src="test-images/mobile-logo.jpg" width="142" height="51" alt=""></amp-img>
</div>
<!-- Header Wrapper End -->
<!-- Nav Bar Begin -->
<div id="navbar-container">
<ul>
<li>Menu</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<!-- Nav Bar End -->
<!-- Main Content Area Begin -->
<div id="main-content-area">
</div>
<!-- Main Content Area End -->
</div>
<!-- Main Wrapper End -->
</body>
</html>
#main-navigation:target + #main-container {
width: 80%;
#main-container {
width: 80%;
left: 20%;
}
#header-wrapper {
width: 80%;
left: 20%;
} /* <- MISSING THIS RIGHT CURLY BRACE */
}
</style>
Currently I have the following code...
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<link href="verna.css" type="text/css" rel="stylesheet" />
</head>
<body>
<section id="devices">
<h1>Gruppen</h1>
<div class="group">
<h2>Gruppe 1</h2>
<ul>
<li class="device">Schalter 1</li>
<li class="device">Schalter 2</li>
<li class="device">Schalter 3</li>
</ul>
</div>
<div class="group">
<h2>Gruppe 2</h2>
<ul>
<li class="device">Schalter 1</li>
<li class="device">Schalter 2</li>
<li class="device">Schalter 3</li>
</ul>
</div>
</section>
</body>
</html>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
#devices {
background-color: yellow;
}
#devices .group {
background-color: gray;
}
#devices .group ul {
text-align: center;
}
#devices .group .device {
background-color: green;
display: inline-block;
margin: 5px;
max-width: 200px;
width: 100%;
}
... which looks like this:
But I want that the green <li>-elements floats in columns. It should look like this:
Please note: The number of the green <li>-elements is variable, there can be more or less than three elements and there can be more than two columns! I want to order the <li>-elements "column-wise" and center them...
Thanks for help :-)
The thing that is centering "Schalter 3" is text-align: center;. We can fix this by removing
#devices .group ul {
text-align: center;
}
and adding:
#devices .group ul {
margin-left: 50px;
}
#devices .group li {
text-align: center;
}
in its place. This centers the text in the li element, instead of centering the li element inside the ul. And it adds the margin to the left to get the indent you wanted.
Working Fiddle.
Restructure your html so that each "column" is it's own container (div) which has an appropriate width. Alternatively, if you hate yourself, use a table.
Check out this fiddle.
The trick was to turn the lis back into block-level elements so that they could have width. Then set width: 40%; (40% leaves a little room for the 5px margin) and float: left;. Also adding overflow: auto; to the ul so that it would contain its floated lis.
This is a pure html/css Question, here it goes..
I have a floating div to the right of my page layout, I need it to disappear if my screen size is too small (or if resize the browser window to a smaller setting). Let's say it's something as simple as this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Layout test</title>
<link href="simple.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<h1>Welcome</h1>
<div id="right-div">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
<div id="main">
<p>Some content goes here!</p>
</div>
</body>
</html>
let's say it has this simple CSS too:
#main {
border: 1px solid black;
width: 800px;
height: 500px;
padding: 7px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 10;
}
#right-div {
border: 1px solid black;
float: right;
width: 200px;
position: relative;
z-index: 9;
}
As of now, if I reduce window size, the div with id of right-div starts to overlap with the "main" div. I need to know how to make it disappear or hide if the screen size is small (or getting smaller).
How can I accomplish this?
Thank you all in advance for your help,
J.
Use Media Queries. Example:
#media all and (max-width: 300px) {
.floated_div { display: none; }
}
jsFiddle Example. Resize the output area until it is smaller then 300px to see the effect.
See this answer for IE compatibility.
Here is a solution if you have a fixed width layout. http://jsfiddle.net/uMVMG/
<div id="container">
<div class="inner">
<div id="right-div">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
<div id="main">
<p>Some content goes here!</p>
</div>
</div><!-- .inner end -->
</div><!-- #container end -->
#container {
overflow: hidden;
max-width: 500px;
min-width: 300px;
}
#container .inner {
width: 500px;
}
#right-div {
float: right;
width: 200px;
background: green;
}
#main {
width: 300px;
height: 200px;
background: red;
}