I am trying to make 4 separate buttons in a layout in a foursquare type layout. (see attached image and pretend the boxes are the same size and equidistant from eachother) my issue is that i want the boxes to be in the center of the page no matter the browser window size, except i do not want the buttons to re-size when the page gets too small. I am drawing blanks at how to do this but it doesnt seem to hard.
body{
font-family: Arial, Helvetica, Sans-Serif;
font-size:1em;
padding:0;
margin:0;
}
#content{
position:relative;
}
/* Banner Styling */
#banner {
display:inline-block;
}
#banner a{
text-decoration:none;
color:black;
}
#banner h1{
float:left;
padding-left:1em;
padding-right:auto;
}
#banner #logo{
position:absolute;
top:0px;
right:0px;
}
/* Navigation Styling */
Nav {
margin-top:2em;
}
Nav ul{
margin:0;
padding:0;
overflow:hidden;
list-style-type:none;
background-color: #1666af;
padding-left:2em;
min-width:1532px;
}
Nav ul li{
float:left;
text-align:center;
}
Nav li a{
border: 1px solid #1666af;
padding:.3em 2em .3em 2em;
display: block;
background-color: #1666af;
color:White;
text-decoration:none;
}
Nav .current{
background-color:green;
border:1px solid green;
}
Nav li a:hover{
border: 1px solid #278efc;
background-color:#278efc;
}
/* BUTTONS */
#buttons{
position:relative;
left:50%;
}
#buttons a{
width:330px;
height:210px;
display:inline-block;
text-align:center;
color:white;
text-decoration:none;
border-radius:6px;
margin-top:50px;
box-sizing:border-box;
padding-top:89px;
}
/* CDW Button */
#button1{
border:1px solid black;
background-color:green;
transition: background-color 1.0s;
}
#button1:hover{
background-color:yellow;
}
/* ADR button */
#button2{
border:1px solid black;
background-color:blue;
transition: background-color 1.0s;
}
#button2:hover{
background-color:red;
}
/* GoGatway Button */
#button3{
border:1px solid black;
background-color:red;
transition: background-color 1.0s;
height:60px!important;
padding-top:20px!important;
}
#button3:hover{
background-color:teal;
}
/* AAS button */
#button4{
border:1px solid black;
background-color:orange;
transition: background-color 1.0s;
height:60px!important;
padding-top:20px!important;
}
#button4:hover{
background-color:brown;
}
<!DOCTYPE html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<title>Website</title>
</head>
<body>
<div id="content">
<div id="banner">
<h1>Website</h1>
<img id="logo" src="images/imagehere" alt="imagehere" />
</div>
<nav>
<ul>
<li><a class="current" href="default.htm"> Home</a></li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</nav>
<div id=buttons>
Placeholder
Placeholder
Placeholder
Placeholder
</div>
</div>
</body>
</html>
<div id=buttons>
<!--create a div here-->
<div class="container" style=" width:100%, height:540px">
<!--inside this div you create a new div for your foursquares-->
<div class="forsquare">
<!--use something like canvas to create the graphic or
use something like canvas to get the image how you would like it
you can also create a image and map it to create different a href
elements that links from the square-->
</div>
</div>
Related
I have the following problem: When I use absolute positioning for the #mobile-nav-content container for my mobile menu, the elements of the ul in it are appearing top of each other.
I want them to be stacked under each other with background-color:grey; (They do not need to be hidden, I will work on that part later).
I want the elements of the ul to be over each other and the background color to be BLACK.
This is my code, what do I need to change to get this to work?
/*===FARBEN===
BLAU:#1F4E8C
GRAU:#3D3F45
HELLGRAU: #E5E5E5
ROT: #A62C21
*/
/* GLOBAL */
body {
margin: 0;
font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
font-size:16px;
}
* {
box-sizing: border-box;
}
/* GENERELLES */
.clearfix::after{
content: "";
display: block;
clear: both;
}
/*===NAVIGATIONSLEISTE===*/
.header-nav{
width:100%;
height:50px;
background-color:#3d3f45;
position:relative;
font-size:25px;
font-weight:bold;
}
.header-nav a>img{
position:absolute;
height:30px;
width:auto;
top:10px;
left:10px;
}
.header-nav ul>li{
display:inline-block;
height:100%;
}
.header-nav ul{
margin:0;
padding:0;
position:absolute;
height:100%;
right:10px;
}
.header-nav ul>li>a{
display:inline-block;
margin-top:10px;
}
.header-nav ul>li>a:link{color:black;text-decoration:none;}
.header-nav ul>li>a:hover{color:black;text-decoration:none;}
.header-nav ul>li>a:active{color:black;text-decoration:none;}
.header-nav ul>li>a:visited{color:black;text-decoration:none;}
#active{
background-color:#A62C21;
}
/* MOBILES NAVIGATIONSMENÜ */
#mobile-nav-dropdown{
position:relative;
}
#mobile-nav-content{
position:absolute;
right:0;
top:50px;
}
#mobile-nav-button{
color:white;
float:right;
font-size:30px;
border: 2px solid white;
padding-left:9px;
padding-right:9px;
margin-top:5px;
margin-right:5px;
}
#mobile-nav-content>ul>li{
display:block;
background-color:#3D3F45;
padding-left:20px;
padding-right:20px;
}
#mobile-nav-content>ul{
margin-right:40px;
}
/* HEADER-BANNER */
#header-banner{
background: url("../img/hintergrund.jpg") no-repeat;
width:100%
height:0;
padding-top:20.83%;
background-size:contain;
}
#header-banner-klein{
background: url("../img/hintergrund-klein.jpg") no-repeat;
width:100%
height:0;
padding-top:15.625%;
background-size:contain;
}
/* GRID SYSTEM */
.container{
width:95%;
margin-left:auto;
margin-right:auto;
}
.row::after{
content:"";
clear:both;
display:block;
border: 0 !important;
}
[class*="col-"]{
float:left;
padding:10px;
}
.col-1{width:16.6666%;}
.col-2{width:33.3333%;}
.col-3{width:50%; }
.col-6{width:100%; }
/* GRID SYSTEM SICHTBARKEIT
.container,.container *{
border:1px solid #91c4ff;
}
[class*="col-"]{
background-color:#bfddff;
}
p {background-color:#91c4ff;
padding:0;
margin:0;
color:#fff;
text-align:center;
} */
/* Responsive Design */
#media(max-width:768px){
.col-1{width:33.3333%;}
.col-2{width:50%;}
.col-3{width:100%;}
}
#media(max-width:480px){
.col-1{width:50%;}
.col-2{width:100%;}
.col-3{width:100%;}
}
/* GRID SYSTEM FIX */
.header-nav *{
padding:0;
border:0;
}
.header-nav .container{
width:100%;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Startseite</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
<!-- NAVIGATIONSLEISTE -->
<nav class="header-nav">
<!-- <div class="container">
<div class="row">
<div class="col-6">
<a href="index.html">
<img src="src/img/webdesign-logo.png">
</a>
<ul>
<li id="active">Startseite</li>
<li>Leistungen</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
</div> -->
<div class="container">
<div class="row">
<div class="col-6 clearfix">
<a href="index.html">
<img src="src/img/webdesign-logo.png">
</a>
<div id="mobile-nav-dropdown" class="clearfix">
<div id="mobile-nav-button">≡</div>
<div id="mobile-nav-content" class="clearfix">
<ul>
<li id="active">Startseite</li>
<li>Leistungen</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- HEADER-BANNER -->
<header id="header-banner"></header>
</body>
</html>
You are very close with the code you have, you just need to make one change. The problem is being caused by height:100% in your .header-nav ul CSS. What this does is take 100% of the container height (i.e. #mobile-nav-dropdown ), but for this to work the container must have been given a specific height.
In this case, we don't want to give the nav dropdown and ul a specific height, but instead to be auto so it will be the height it needs to accommodate its contents. So you just need to change the height in .header-nav ul to auto:
.header-nav ul{
margin:0;
padding:0;
position:absolute;
right:10px;
/* Change height from 100% to auto (or remove it altogether as auto is the default value ) */
height:auto;
}
When you start working on the code to show/hide the menu, this should work with it!
Working Example:
/*===FARBEN===
BLAU:#1F4E8C
GRAU:#3D3F45
HELLGRAU: #E5E5E5
ROT: #A62C21
*/
/* GLOBAL */
body {
margin: 0;
font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
font-size:16px;
}
* {
box-sizing: border-box;
}
/* GENERELLES */
.clearfix::after{
content: "";
display: block;
clear: both;
}
/*===NAVIGATIONSLEISTE===*/
.header-nav{
width:100%;
height:50px;
background-color:#3d3f45;
position:relative;
font-size:25px;
font-weight:bold;
}
.header-nav a>img{
position:absolute;
height:30px;
width:auto;
top:10px;
left:10px;
}
.header-nav ul>li{
display:inline-block;
height:100%;
}
.header-nav ul{
margin:0;
padding:0;
position:absolute;
height:auto;
right:10px;
}
.header-nav ul>li>a{
display:inline-block;
margin-top:10px;
}
.header-nav ul>li>a:link{color:black;text-decoration:none;}
.header-nav ul>li>a:hover{color:black;text-decoration:none;}
.header-nav ul>li>a:active{color:black;text-decoration:none;}
.header-nav ul>li>a:visited{color:black;text-decoration:none;}
#active{
background-color:#A62C21;
}
/* MOBILES NAVIGATIONSMENÜ */
#mobile-nav-dropdown{
position:relative;
}
#mobile-nav-content{
position:absolute;
right:0;
top:50px;
}
#mobile-nav-button{
color:white;
float:right;
font-size:30px;
border: 2px solid white;
padding-left:9px;
padding-right:9px;
margin-top:5px;
margin-right:5px;
}
#mobile-nav-content>ul>li{
display:block;
background-color:#3D3F45;
padding-left:20px;
padding-right:20px;
}
#mobile-nav-content>ul{
margin-right:40px;
}
/* HEADER-BANNER */
#header-banner{
background: url("../img/hintergrund.jpg") no-repeat;
width:100%
height:0;
padding-top:20.83%;
background-size:contain;
}
#header-banner-klein{
background: url("../img/hintergrund-klein.jpg") no-repeat;
width:100%
height:0;
padding-top:15.625%;
background-size:contain;
}
/* GRID SYSTEM */
.container{
width:95%;
margin-left:auto;
margin-right:auto;
}
.row::after{
content:"";
clear:both;
display:block;
border: 0 !important;
}
[class*="col-"]{
float:left;
padding:10px;
}
.col-1{width:16.6666%;}
.col-2{width:33.3333%;}
.col-3{width:50%; }
.col-6{width:100%; }
/* GRID SYSTEM SICHTBARKEIT
.container,.container *{
border:1px solid #91c4ff;
}
[class*="col-"]{
background-color:#bfddff;
}
p {background-color:#91c4ff;
padding:0;
margin:0;
color:#fff;
text-align:center;
} */
/* Responsive Design */
#media(max-width:768px){
.col-1{width:33.3333%;}
.col-2{width:50%;}
.col-3{width:100%;}
}
#media(max-width:480px){
.col-1{width:50%;}
.col-2{width:100%;}
.col-3{width:100%;}
}
/* GRID SYSTEM FIX */
.header-nav *{
padding:0;
border:0;
}
.header-nav .container{
width:100%;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Startseite</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
<!-- NAVIGATIONSLEISTE -->
<nav class="header-nav">
<div class="container">
<div class="row">
<div class="col-6 clearfix">
<a href="index.html">
<img src="src/img/webdesign-logo.png">
</a>
<div id="mobile-nav-dropdown" class="clearfix">
<div id="mobile-nav-button">≡</div>
<div id="mobile-nav-content" class="clearfix">
<ul>
<li id="active">Startseite</li>
<li>Leistungen</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- HEADER-BANNER -->
<header id="header-banner"></header>
</body>
</html>
I am creating a site similar to jsbin in that site i have created menubar which is in black color and below menubar there is code container which is in grey color where user will type a code my problem is the codecontainer is overlaping the menu bar little not 100% i donot want to over lap it so how do i solve this problem
here is my code
HTML
<html>
<head>
<title>CodePlayer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="StyleSheets/CodePlayerStyleSheet.css">
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<!--------------------MENUBAR---------------------------------->
<div id="menubar">
<div id="logo">CodePlayer</div>
<div id="btnrun"><button id="runbtn">Run</button></div>
<div id="menubar">
<ul id="menulist">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li style="border:none;width:15%">Output</li>
</ul>
</div>
</div>
<!-------------------------------------------------------->
<div class="emptydiv"></div>
<!------------------CODECONTAINER---------------------------------------->
<div class="codecontainer" id="htmlcontainer">
<textarea>Example</textarea>
</div>
</div>
<!--------------------------------------------------------------->
<script>
</script>
</body>
</html>
CSS
body{
margin:0;
padding:0;
}
#menubar{
background-color: #000000;
width:100%;
height:50px;
}
#logo{
font-family: 'Lobster', cursive;
color:white;
font-size:30px;
padding:5px 0 0 15px;
float:left;
}
#runbtn{
float:right;
font-size:15px;
background-color:rgba(0,0,0,1.00);
border:1px solid #FFFFFF;
width:60px;
height:20px;
border-radius:10px;
color:white;
cursor:pointer;
position:relative;
top:8px;
}
#btnrun{
padding: 12px 20px 0 0;
}
#menulist{
list-style:none;
margin:0 auto;
border:1px solid #FFFFFF;
width:296px;
height:30px;
padding:0;
position:relative;
top:2px;
}
#menulist li{
float:left;
color:white;
border-right:1px solid white;
padding:5px 12px 7px 15px;
cursor:pointer;
}
li:hover{
background-color:#FFFFFF;
color:rgba(0,36,255,1.00) !important;
}
.emptydiv{
clear:both;
}
.codecontainer{
background-color:rgba(177,177,177,1.00);
color:black;
float:left;
height:100%;
width:25%;
}
Make the following change
#menubar {
background-color: #000000;
width:100%;
height:auto;
padding: 10px; /* you can change this, but it's to add some spacing on your menubar */
}
I am trying to make a Resumé for job applications now i have created a background and a small menu using CSS. Now my question:
Is there a way without using <frame>,<iframe>,<frameset> to make a area where I can target my links to without losing my menu.
When I was learning for ICT I got lessons in HTML/CSS and was learned to use the pages as a table and place an iframe on the right area you want it to.
Now I want to try html5/css3 to make a page working without the above.
my HTML
<html>
<head>
<title></title>
<link href="Style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="navigationMenu">
<li><a class="home" href="#"><span>Home</span></a></li>
<li><a class="about me" href="#"><span>About me</span></a></li>
<li><a class="kennis" href="#"><span>Kennis</span></a></li>
<li><a class="werkervaring" href="#"><span>Werkervaring</span></a></li>
</ul>
/body>
</html
my CSS
body{
background-image:url(*);
background-repeat:no-repeat;
background-size:cover;
font-family:Arial, Helvetica, sans-serif;
}
*{
/* A universal CSS reset */
margin:0;
padding:0;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
/* The background sprite: */
background:url(*) no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
/* Green Button */
#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
/* Blue Button */
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
/* Orange Button */
#navigationMenu .werkervaring { background-position:-76px 0;}
#navigationMenu .werkervaring:hover { background-position:-76px -39px;}
#navigationMenu .werkervaring span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
/* Yellow Button */
#navigationMenu .kennis { background-position:-114px 0;}
#navigationMenu .kennis:hover{ background-position:-114px -39px;}
#navigationMenu .kennis span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
Yes there is. Check out Miniport's source code on how to position the nav menu, within the <nav> div. Everything you want to do is shown there.
Specifically, what you're looking for is position: fixed
#nav
{
background-color: #282828;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 10000;
cursor: default;
}
<html>
<head>
<title></title>
<link href="Style.css" rel="stylesheet">
<style>
/* move these into style.css */
.navigationTarget {
border: 1px solid #cccccc;
margin: 2em;
padding: 2em;
height: 400px;
}
</style>
</head>
<body>
<ul id="navigationMenu">
<li><a class="home" href="#home"><span>Home</span></a></li>
<li><a class="about me" href="#about"><span>About me</span></a></li>
<li><a class="kennis" href="#kennis"><span>Kennis</span></a></li>
<li><a class="werkervaring" href="#wer"><span>Werkervaring</span></a></li>
</ul>
<div class="navigationTarget">
<a name="home"></a> Home
</div>
<div class="navigationTarget">
<a name="about"></a> Home
</div>
<div class="navigationTarget">
<a name="kennis"></a> Home
</div>
<div class="navigationTarget">
<a name="wer"></a> Home
</div>
</body>
</html>
Trying to have padding around the menu items and when they hover over it changes background colour. However, at the moment padding is only effecting the side of the elements and not the top or bottom.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" type"text/css" />
</head>
<body>
<div id="container">
<div id="header">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
CSS:
#container {
margin:auto;
border:1px solid black;
width:960px;
height:700px;
}
#header {
width:960px;
height:150px;
border: 1px solid blue;
}
#menu {
width:800px;
list-style:none;
}
#menu li {
float:left;
margin-left:20px;
border:1px solid black;
}
#menu a:hover {
background:blue;
padding:20px;
}
#menu a {
padding:20px;
height:20px;
text-decoration:none;
}
Simply replace height:20px with display:block for #menu a as height seems redundant from what I can see.
#menu a {
padding:20px;
display:block;
text-decoration:none;
}
Hi I have a dropdown button that when you hover it, it drops down some links to pages. I want those links to be the same size as the width of the button.
The button size is 100% width of the content, so it varies. How do I make the size of the drop down items the same size as the button with CSS?
<style type="text/css">
#button { /* Box in the button */
display: block;
width: 190px;
}
#button a {
text-decoration: none; /* Remove the underline from the links. */
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:left;
list-style-type: none;
}
#button ul {
list-style-type: none; /* Remove the bullets from the list */
}
#button .top {
display:block;
width:100%;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase; /* The button background */
}
#button ul li.item {
display: none; /* By default, do not display the items (which contains the links) */
}
#button ul:hover .item { /* When the user hovers over the button (or any of the links) */
display: block;
border: 1px solid black;
background-color: #6CC417;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
.container
{
text-align:center;
}
.center_div
{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:90%;
background-color:#d0f0f6;
text-align:left;
padding:8px;
}
</style>
</head>
<body bgcolor="#FFFFFF">
<p><img src="Screen%20shot%202010-07-11%20at%204.07.59%20PM.png" width="211" height="86" alt="idc">
<ul>
<li>
<div id="button">
<ul>
<li class="top">OtherOverflow Sites</li>
<li class="item">Visit serverfault</li>
<li class="item">Visit superuser</li>
<li class="item">Visit doctype</li>
</ul>
</div>
</li>
<li>
<div id="button">
<ul>
<li class="top">OtherOverflow Sites</li>
<li class="item">Visit serverfault</li>
<li class="item">Visit superuser</li>
<li class="item">Visit doctype</li>
</ul>
</div>
</li>
</ul></p>
<div class="container">
<div class="center_div">
<h1>Hello World!</h1>
<p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p>
</div>
</div>
</body>
Three things:
#button ul:hover .item needs width set to 100%.
#button ul:hover .item {any of the links) */
display: block;
width:100%;
border: 1px solid black;
background-color: #6CC417;
}
.
All links are set to 120px!
a:link,a:visited {
display:block;
width:120px;
...
Delete the width:120px;
As meder said, Do not use an id, use a class. And the code has the same id multiple times -- which is illegal.
So: <div id="button"> becomes: <div class="DropDwnMenuBtn">.
You have multiple button ids. Use classes for multiple elements.
Shouldn't you just need #button a { display:block; }? It's hard to tell when you don't have a visual.