hoping someone can explain why there is a gap between the "nav" and "header" divs? I think its something to do with the text but can't find the right solution for the CSS. Any help is much appreciate :)
html, body{
margin: 0;
padding: 0;
height:100%;
}
body {
background-color: black;
font-size: 0.8em;
}
audio {
width: 300px;
}
.header {
width: 100%;
height: 10%;
font-size: 0.9em;
font-family: sans-serif;
text-align: center;
color: white;
background-color: brown;
padding: 0;
margin: 0;
}
.nav {
width: 100%;
height: 7%;
padding: 0;
margin: 0;
background-color: grey;
}
#main {
width: 100%;
height: 100%;
}
.lyrics {
max-width: 80%;
margin: 0 auto;
height: auto;
padding: 20px 50px 20px 50px;
color: white;
}
<html>
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<title>
Test
</title>
<body>
<div id="main">
<div class="nav">
</div><!-- nav -->
<div class="header">
<h1>Web Page</h1>
</div><!--header-->
<div class="lyrics">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div> <!-- lyrics -->
</div> <!-- main div -->
</body>
</html>
I believe you are talking about the black space above the "Web Page" title? In which case you just need to remove the top margin of the h1 like I did below:
html, body{
margin: 0;
padding: 0;
height:100%;
}
body {
background-color: black;
font-size: 0.8em;
}
audio {
width: 300px;
}
.header {
width: 100%;
height: 10%;
font-size: 0.9em;
font-family: sans-serif;
text-align: center;
color: white;
background-color: brown;
padding: 0;
margin: 0;
}
.nav {
width: 100%;
height: 7%;
padding: 0;
margin: 0;
background-color: grey;
}
#main {
width: 100%;
height: 100%;
}
.lyrics {
max-width: 80%;
margin: 0 auto;
height: auto;
padding: 20px 50px 20px 50px;
color: white;
}
h1 { margin-top: 0; }
<html>
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<title>
Test
</title>
<body>
<div id="main">
<div class="nav">
</div><!-- nav -->
<div class="header">
<h1>Web Page</h1>
</div><!--header-->
<div class="lyrics">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div> <!-- lyrics -->
</div> <!-- main div -->
</body>
</html>
remove the top margin of the h1
Related
I'm trying to create a right floated sidebar in a parent div, with a different background color. The parent has a 3px dashed border, and the sidebar doesn't extend all the way to the edges. Instead, the parent's background color is visible between the dashes.
a view of the body of the site
a closer view of the corner, showing that the background does not meet the edge of the border
I've tried adjusting the positions, changing the order of my elements, changing the height and width, I'm kind of at a loss.
body {
background-image: url("https://i.lensdump.com/i/Rxu5rz.png");
}
#font-face {
font-family: 'Smalle';
src: url("https://files.catbox.moe/x368w4.ttf");
}
.main {
position: absolute;
width: 650px;
height: 675px;
top: 50%;
left: 50%;
margin-top: -325px;
margin-left: -350px;
border: 3px dashed #456655;
background-color: #fff8e5;
font-family: 'Smalle';
}
.sidebar {
position: relative;
height: 675px;
width: 200px;
float: right;
background-color: #FEDA6A;
}
.sidecontent {
text-align: center;
font-family: 'Smalle';
}
.content {
margin-top: 10px;
}
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TITLE</title>
<link href="1styles.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="main">
<div class="sidebar">
<br>
<div class="sidecontent">
<p>This is where text and links will go... eventually.</p>
</div>
</div>
<div class="content">
<center><span class="title">TITLE</span></center>
<p style="padding: 5px; margin: 6px; width: 425px;">Lorem ipsum dolor sit amet...</p>
</div>
</div>
</body>
</html>
You can do something like this with flexbox. Put outline on the parent and use negative margins to move the child to cover up the outline.
.page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 400px;
outline: 5px dashed green;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
align-items: stretch;
background-color: red;
margin: -5px;
padding: 10px;
}
.column.left {
border-right: 0px;
}
.column.right {
border-left: 0px;
background-color: yellow;
}
<div class='page-wrapper'>
<div class='row'>
<div class='column left'>
Column 1
</div>
<div class='column right'>
Column Two
</div>
</div>
</div>
Try this, is this what you want to achieve?
body {
background-image: url("https://i.lensdump.com/i/Rxu5rz.png");
}
#font-face {
font-family: 'Smalle';
src: url("https://files.catbox.moe/x368w4.ttf");
}
.main {
position: absolute;
width: 650px;
height: 675px;
top: 50%;
left: 50%;
margin-top: -325px;
margin-left: -350px;
border: 3px dashed #456655;
background-color: #fff8e5;
font-family: 'Smalle';
}
.sidebar {
position: relative;
height: 681px;
width: 200px;
float: right;
background-color: #FEDA6A;
top: -3px;
right: -3px;
}
.sidecontent {
text-align: center;
font-family: 'Smalle';
}
.content {
margin-top: 10px;
}
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TITLE</title>
<link href="1styles.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="main">
<div class="sidebar">
<br>
<div class="sidecontent">
<p>This is where text and links will go... eventually.</p>
</div>
</div>
<div class="content">
<center><span class="title">TITLE</span></center>
<p style="padding: 5px; margin: 6px; width: 425px;">Lorem ipsum dolor sit amet...</p>
</div>
</div>
</body>
</html>
I know there are so many questions on this topic but I can seem to find a way to sort it out..
Im new to css and I am trying to re-create the simple box within a box method..
Heres the link to my Codepen
And here is the .html to give further context..
<html>
<head>
<link rel="stylesheet" href="index.css">
</script>
</head>
<body class="body">
<!-- Navbar -->
<nav class="navbar">
<h1>Hello World</h1>
</nav>
<!-- Header Boxes -->
<div class="header-box">
<div class="child-box-1">
<div class="child-box-2">
<div class="child-box-3">
</div>
</div>
</div>
</div>
</body>
</html>
Basically, class = 'header-box' needs to house child-box-1,child-box-2,child-box-3, so there would essentially be a red, yellow and black box within the main blue box..
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#300;400&family=Montserrat&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.body {
padding: 0;
margin: 0;
background-color:rgb(57, 67, 77);
}
.navbar {
padding: 20;
margin: 0;
max-width: 100%;
background-color:rgb(57, 67, 77);
display: flex;
justify-content: center;
}
h1 {
padding-top: 10;
margin: 0;
font-family:'Montserrat';
color: whitesmoke;
font-size: xx-large;
}
.header-box {
padding:0;
margin: 10;
max-width: 100%;
height:200px;
background-color: blue;
display: flex;
text-align: center;
}
.child-box-1 {
padding: 0;
margin: 10;
background: red;
width: 32%;
height: 40px;
margin: 1%;
}
.child-box-2 {
padding: 0;
margin: 10;
background: yellow;
width: 32%;
height: 40px;
margin: 1%;
}
.child-box-3 {
padding: 0;
margin: 10;
background: black;
width: 32%;
height: 40px;
margin: 1%;
}
<html>
<head>
<link rel="stylesheet" href="index.css">
</script>
</head>
<body class="body">
<!-- Navbar -->
<nav class="navbar">
<h1>Hello World</h1>
</nav>
<!-- Header Boxes -->
<div class="header-box">
<div class="child-box-1"></div>
<div class="child-box-2"></div>
<div class="child-box-3"></div>
</div>
</body>
</html>
.header-box {
margin: 0 auto;
width: 300px;
height: 100px;
background: lightblue;
padding: 10px 20px;
display: flex;
justify-content: space-between;
}
.header-box > div {
width: 50px;
aspect-ratio: 1;
background: red;
}
<div class="header-box">
<div class="child-box-1"></div>
<div class="child-box-2"></div>
<div class="child-box-3"></div>
</div>
I want to have the right column of the main body to be split into two. At the moment I only would like a bottom border showing as an outline but can't get it to work. It is the #map section that I would like to change.
I have tried a couple of different things but can't figure it out, I have probably just missed something but I can't figure out what.
HTML Code:
<!DOCTYPE HTML>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.mainSect {
height: 200%;
background-color: #FEDB00;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
opacity: .6;
position: relative;
margin-top: -12px;
border: 2px solid black;
}
#news {
position: absolute;
width: 70%;
height: 100%;
border-right: 2px solid black;
}
#map {
position: absolute;
width: 20px;
height: 20px;
margin-left: 600px;
border-bottom: 2px solid black;
}
</style>
<html>
<head>
<title>Waitemata FC - NEWS </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="nav">
NEWS
<a href="index.html">TEAMS
<ul class="subMenu">
<li>Juniors</li>
<li>Youth</li>
<li>Seniors</li>
</ul>
</a>
REGISTRATION
GALLERY
SPONSORS
ABOUT
</div>
<div class="imgSect">
<img class="logo" src="img/logo.png" alt="Waitemata AFC Logo" />
<p class="name">WAITEMATA AFC </p>
</div>
FaceBook Page
<div class="mainSect">
<div id="news">
</div>
<div class="map">
<p>test </p>
</div>
</div>
<footer>
</footer>
</body>
</html>
First, to divide the main body, you must have a container section and inside it to have the right & left columns,
For Ex:
<body>
<div class="container">
<div class="left-column"></div>
<div class="right-column">
<div class="column-header">
</div>
</div>
</div>
</body>
<style type="text/css">
body {
width: 100%;
height: auto;
}
.container {
width: 1200px;
/*for ex. height:auto;*/
padding-right: 20px;
padding-left: 20px;
}
.left-column {
width: 70%;
/*or in px;*/
height: auto;
float: left;
}
.right-column {
width: 30%;
height: auto;
float: left;
}
.column-header {
width: 100%;
height: 50px;
/*change it as you wish;*/
}
</style>
I have a header with an image and an "hamburger" icon for a mobile navigation menu. What I am simply trying to do it display my logo at approx 75% of the available screen with the menu icon to the far right.
I have a master div container and then within it i have 2 divs which has the logo in the left div and menu icon in the right. For some reason I cannot get the menu to stay on the right in the same div container. Any suggestions?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu {
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png"/>
</div>
<div id="menu">
<button type="button"><span>Menu</span></button>
</div>
</div>
<div id="mobileMenu">some content</div>
</body>
</html>
give specific width to both #logoContainer and #menu with display:inline-block;
#logoContainer{
width:75%;
display:inline-block;
}
#menu{
width:25%;
display:inline-block;
text-align: right;
}
#menu button{
margin-right:10px
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu{
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
<div id="menu">
<button type="button">
<span>
Menu
</span>
</button>
</div>
</div>
<div id="mobileMenu">
some content
</div>
</body>
</html>
How about using media queries to make the logo appear. With my example, I've set the display on #logo to "none" . With my media query, whenever the page reaches a min-width of 800px it will display the #logo element.
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
<div id="menu">
<button type="button">
<span>
Menu
</span>
</button>
</div>
</div>
<div id="mobileMenu">
some content
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
display:none;
width: auto;
max-width: 90%;
}
#menu{
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: black;
display: none;
}
#media (min-width:800px){
#logo{display:block;}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body{
margin: 0px;
}
#container {
box-sizing: border-box;
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: red;
}
#logoContainer {
float: left;
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo{
max-width: 75%;
border: 0px;
margin: 0px;
}
#menu{
height: 10px;
width: 25%;
float: right;
background: yellow;
}
#mybtn{
float: right;
}
#mobileMenu {
display: inline;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<button type="button" id="mybtn">
<span>
Menu
</span>
</button>
<div id="mobileMenu">
some content
</div>
</div>
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
</div>
</body>
</html>
I've created my jquery slider, and now I'm having issues trying to make it responsive. the navigation dots and navigation buttons can be positioned at fixed height. But I want to position next button to the center right of the carousel and wanted to do it in %. so, I give height:100% to its parent body, #container, #carousel. and it worked but the page scaled as you can see in the demo I provided. any suggestion how to position the #next,#prev in percentages?
Here is my work: http://codepen.io/anon/pen/ZpXmQj
html,
body {
position: relative;
background-color: #ccc;
}
Css html,
body {
height: 100%;
position: relative;
background-color: #ccc;
}
* {
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
background-color: white;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
background-color: pink
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {} #prev,
#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border: none;
font-size: 2em;
padding: 1%;
color: white;
font-weight: bold;
font-family: 'Baloo Tamma', cursive;
height: 100%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left: 0;
}
#next {
right: 0;
}
.active {
z-index: 1;
}
.indicators {
z-index: 2;
position: absolute;
bottom: 49%;
left: 45%;
}
.circle {
border-radius: 10px;
width: 10px;
height: 5px;
border: 2px solid black;
}
.indicators div {
padding: 8px;
margin: 2px;
display: inline-block;
}
.blip {
background-color: orange;
}
div.indicators:hover {
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Image carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="carouselcss.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> -->
</head>
<body>
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=">">
<input type="button" name="next" id="prev" value="<">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
<div class="indicators">
<div class="circle blip"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
</body>
</html>
Check this out. I believe what was happening was that your next and prev were adjusting to the height of the screen and not the height of the images like you were hoping.
So to customize this, first set the height and width of your images to whatever you want, match that same height for your buttons, and as long as they're in the same parent div it should match
<html>
<head>
<title>Image carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="carouselcss.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> -->
</head>
<body>
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=">">
<input type="button" name="prev" id="prev" value="<">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
<div class="indicators">
<div class="circle blip"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
</body>
</html>
html,body {
height: 100%;
position: relative;
background-color: #ccc;
}
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
background-color: white;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
background-color: pink
}
.slide {
position: absolute;
width: 100%;
z-index: 0;
height: 100%;
}
.sliderbuttons {
}
#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border:none;
font-size: 2em;
padding: 1%;
color: white;
font-weight: bold;
font-family: 'Baloo Tamma', cursive;
height: 100%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left:0;
}
#next {
right:0;
}
.active {
z-index: 1;
}
.indicators {
z-index: 2;
position: absolute;
bottom:49%;
left: 45%;
}
.circle {
border-radius: 10px;
width: 10px;
height: 5px;
border:2px solid black;
}
.indicators div {
padding: 8px;
margin: 2px;
display: inline-block;
}
.blip {
background-color: orange;
}
div.indicators:hover {
cursor: pointer;
}