what is the problem? why the links is at not correct position?how can I keep the links in correct position after minimizing the browser also there is no separation between the links. why this happens?please rectify my css code. also how can I make it more resposive.
.body {
background-color: #E8E8E8;
color: 000305;
font-size: 87.5%;
/*Base font size 14px*/
font-family: arial, "Lucida Sans Unicode";
font-height: 1.5;
text-align: left;
margin: 0 auto;
width: 70%;
clear: both;
}
a {
text-decoration: none;
}
a:link,
a:visited {
color: #CF5C3F;
}
a:hover,
a:active {
background-color: #CF5C3F;
color: #FFF;
}
.mainHeader img {
width: 20%;
height: auto;
margin: 2% 0;
border-radius: 90px;
}
.mainHeader nav {
background-color: #666;
height: 40px;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
}
.mainHeader nav ul li {
float: left;
display: inline;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
}
.mainHeader nav a:hover,
.mainHeader nav a:active,
.mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
background-color: #CF5C3F;
height: 20px;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.mainContent {
line-height: 25px;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.content {
width: 70%;
float: left;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
margin-bottom: 2%;
}
.top-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
margin-top: 2%;
}
.middle-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.bottom-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.mainFooter {
width: 100%;
float: left;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
background-color: #666;
margin-top: 2% margin-bottom: 2%;
height: 40%;
}
.mainFooter p {
margin: 10px auto;
width: 92%;
color: #FFF;
}
.postinfo {
font-style: italic;
color: #999;
font-size: 90%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>HTML5/CSS3 responsive theme</title>
</head>
<!--Body start here!-->
<body class="body">
<header class="mainHeader">
<!--Main logo of the page!-->
<img src="img/images.jpeg" alt="logo here">
<!-- Main navigation bar!-->
<nav>
<ul>
<li class="active"><a href="#">Home</li>
<li><a href="#">About </li>
<li><a href="#">Portofolio </li>
<li><a href="#">Contact </li>
</ul>
</nav>
</header>
<!--Main content starts here!-->
<div class="mainContent">
<div class="content">
<article class="topcontent">
<header>
<h2>First post
</h2>
</header>
<footer class="postinfo">
<p>This post is written by Christian</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
</content>
</article>
<!--bottom content starts!-->
<article class="bottomcontent">
<header>
<h2>Second post</h2>
</header>
<footer class="postinfo">
<p>This post is written by Christian</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
</content>
</article>
</div>
</div>
<!--This is the right side content!-->
<aside class="top-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<!--This should be the foot of the webpage!-->
<footer class="mainFooter">
<p>Copyright © 2016 1stwebdesinger.com
</p>
</footer>
</body>
</html>
You have some css and html issues in your code.
First close all <a href> tag and second remove float:left from .mainHeader nav ul li class and replace inline to inline-block so you won't need height to show background of nav.
After that you will see all menus are in one row but after resizing little bit more, menu will go down as no such space. For this issue you have to use Media query to solve or use bootstrap or navbar menu style.
You can read more about Media query or Bootstrap for responsiveness.
Check my Fiddle here.
* **Note : Whenever you are using float:left then try to use clear:both after that so there won't be any extra white gap/space however I have removed float from your code, so just side note. Hope it will help..
Changes in your style and html may it helps you
1- close your "a" tag
2- for repsponsive use style in
<style>
.body {
background-color: #E8E8E8;
color: 000305;
font-size: 87.5%;
/*Base font size 14px*/
font-family: arial, "Lucida Sans Unicode";
font-height: 1.5;
text-align: left;
margin: 0 auto;
width: 70%;
clear: both;
}
a {
text-decoration: none;
}
a:link,
a:visited {
color: #CF5C3F;
}
a:hover,
a:active {
background-color: #CF5C3F;
color: #FFF;
}
.mainHeader img {
width: 20%;
height: auto;
margin: 2% 0;
border-radius: 90px;
}
.mainHeader nav {
background-color: #666;
height: 40px;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
}
.mainHeader nav ul li {
float: left;
display: inline;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
}
.mainHeader nav a:hover,
.mainHeader nav a:active,
.mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
background-color: #CF5C3F;
height: 20px;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.mainContent {
line-height: 25px;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.content {
width: 70%;
float: left;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
margin-bottom: 2%;
}
.top-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
margin-top: 2%;
}
.middle-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.bottom-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.mainFooter {
width: 100%;
float: left;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
background-color: #666;
margin-top: 2% margin-bottom: 2%;
height: 40%;
}
.mainFooter p {
margin: 10px auto;
width: 92%;
color: #FFF;
}
.postinfo {
font-style: italic;
color: #999;
font-size: 90%;
}
/*css for responsive */
#media (max-width:767px)
{
.mainHeader nav
{
box-sizing:border-box;
overflow:hidden;
}
.mainHeader nav ul li{
width:100%;
display:block;
float:none;
}
.mainHeader nav, .mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited{
height:100%;
}
.mainHeader nav ul{
padding:0px 0px;
}
.mainHeader nav a:link, .mainHeader nav a:visited
{
width:100%;
}
.mainHeader nav ul li a{
border-radius:0px 0px;
}
}
</style>
<!--html-->
<nav>
<ul>
<li class="active">Home</li>
<li>About </li>
<li>Portofolio </li>
<li><a href="#">Contact </li>
</ul>
</nav>
Two problem what i have noticed in your code you are not closing the <a> tags
2nd setting the height on hover are never a good practice. on hover links height increases that's why such things happening. see snippet
UPDATED CODE TRY MEDIA QUERY
#media all and (max-width: 768px) {
.mainHeader nav a:link, .mainHeader nav a:visited {
font-size:80%;
padding: 10px 15px;
}
/**MORE CODE FOR WIDTH 0 to 768px**/
}
.body {
background-color: #E8E8E8;
color: 000305;
font-size: 87.5%;
/*Base font size 14px*/
font-family: arial, "Lucida Sans Unicode";
font-height: 1.5;
text-align: left;
margin: 0 auto;
width: 70%;
clear: both;
}
a {
text-decoration: none;
}
a:link,
a:visited {
color: #CF5C3F;
}
a:hover,
a:active {
background-color: #CF5C3F;
color: #FFF;
}
.mainHeader img {
width: 20%;
height: auto;
margin: 2% 0;
border-radius: 90px;
}
.mainHeader nav {
background-color: #666;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
}
.mainHeader nav ul li {
float: left;
display: inline;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
}
.mainHeader nav a:hover,
.mainHeader nav a:active,
.mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.mainContent {
line-height: 25px;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.content {
width: 70%;
float: left;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
margin-bottom: 2%;
}
.top-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
margin-top: 2%;
}
.middle-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.bottom-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.mainFooter {
width: 100%;
float: left;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
background-color: #666;
margin-top: 2% margin-bottom: 2%;
height: 40%;
}
.mainFooter p {
margin: 10px auto;
width: 92%;
color: #FFF;
}
.postinfo {
font-style: italic;
color: #999;
font-size: 90%;
}
#media all and (max-width: 768px) {
.mainHeader nav a:link, .mainHeader nav a:visited {
font-size:80%;
padding: 10px 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>HTML5/CSS3 responsive theme</title>
</head>
<!--Body start here!-->
<body class="body">
<header class="mainHeader">
<!--Main logo of the page!-->
<img src="img/images.jpeg" alt="logo here">
<!-- Main navigation bar!-->
<nav>
<ul>
<li class="active">Home</li>
<li>About </li>
<li>Portofolio </li>
<li><a href="#">Contact </li>
</ul>
</nav>
</header>
<!--Main content starts here!-->
<div class="mainContent">
<div class="content">
<article class="topcontent">
<header>
<h2>First post
</h2>
</header>
<footer class="postinfo">
<p>This post is written by Christian</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
</content>
</article>
<!--bottom content starts!-->
<article class="bottomcontent">
<header>
<h2>Second post</h2>
</header>
<footer class="postinfo">
<p>This post is written by Christian</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
</content>
</article>
</div>
</div>
<!--This is the right side content!-->
<aside class="top-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<!--This should be the foot of the webpage!-->
<footer class="mainFooter">
<p>Copyright © 2016 1stwebdesinger.com
</p>
</footer>
</body>
</html>
Related
I have an aside section that I'd like to have centered using a media query, so that once it's viewed on a mobile, it'll be at the bottom of the page aligned horizontally. Just like this:
This is what it's currently doing:
I have some images and text I don't want to share so I'll change them for this question...
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: white;
}
/*GLOBAL*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header ul {
padding: 0;
margin: 0;
}
.page-title {
font-size: 20px;
}
.page-title-center {
font-size: 20px;
text-align: center;
}
.subheading-center {
font-size: 15px;
text-align: center;
margin-top: 50px;
}
.dark {
padding: 15px;
background: #1CAC4B;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
.dark-center {
padding: 15px;
text-align: center;
background: #1CAC4B;
color: white;
margin: 10px;
}
#hyperlink {
color: #FFEE00;
}
#hyperlinkg {
color: #1CAC4B;
}
/*HEADER*/
header {
background: #1CAC4B;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #FFEE00 3px solid;
display: flex;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0 10px 0 10px;
}
header #branding {
float: left;
}
header #branding-img img {
float: left;
width: 60px;
height: 60px;
padding: 0 20px 20px 0;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 14px;
}
header .highlight, header .current a {
color: #FFEE00 /*YELLOW*/;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/*SHOWCASE*/
#showcase {
background:url("../img/grass.jpg") no-repeat;
background-size: cover;
min-height: 450px;
text-align: center;
color: white;
}
#showcase h1 { /**/
margin-top: 150px;
font-size: 60px;
margin-bottom: 10px;
}
#showcase p {
font-size: 30px;
}
/* CONTACT INFO */
#contact {
color: white;
background: #1CAC4B;
padding: 25px;
border-bottom: #FFEE00 3px solid;
border-top: #FFEE00 3px solid;
}
#contact h1 {
float: left;
}
#contact p {
font-size: 20px;
margin-top: 22px;
font-weight: bold;
float: right;
}
/*BOXES*/
.boxes {
background: white; /*Background behind 3 circular images are white */
display: flex; /*Makes circles drop if page is squished */
flex-wrap: wrap; /*Makes circles in a horizontal row */
justify-content: center;
}
.boxes figure {
margin: 3.5%; /*makes it line up better */
text-align: center; /*Puts text in center*/
font-size: 20px;
}
.boxes figure img {
border-radius: 25px; /*Makes images circular */
width: 310px; /*Sets image width*/
height: 220px; /*Sets image height - heigh and width must be same to make it a circular */
box-shadow: gray 0 0 15px; /*Adds gray shadow to bottom of images */
}
/*MAIN-COL*/
article#main-col {
float: left;
width: 70%;
}
/*ABOUT PAGE SIDEBAR*/
aside#about-sidebar {
float: right;
margin-top: 50px;
}
aside#about-sidebar img {
width: 230px;
height: 184px;
/*257px*/
}
/*SERVICES*/
ul#services li {
list-style: none;
padding: 20px;
border: green solid 1px;
margin-bottom: 10px;
background: #e6e6e6;
}
/*SERVICES PAGE SIDEBAR*/
aside#service-sidebar {
float: right;
margin-top: 50px;
}
/*GALLERY SLIDESHOW*/
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
padding: 10px;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
/*FOOTER*/
footer {
padding: 20px;
margin-top: 20px;
color: white;
background-color: #1CAC4B;
text-align: center;
}
/*MEDIA QUERIES*/
#media(max-width: 768px){
header #branding,
header nav,
header nav li,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
align-content: center;
text-align: center;
width: 100%;
}
header {
padding-bottom: 20px;
}
#showcase h1 {
margin-top: 40px;
}
}
<body>
<main>
<header>
<div class="container">
<div id="branding-img">
<a href="index.html"><img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png">
</div>
<div id="branding">
<h1><span class="highlight">NAME SHORT</span>NAME</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li class="current">About</li>
<li>Services</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">About The Company</h1>
<p class="dark">
Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.
</p>
<h1 class="page-title">About Me</h1>
<p class="dark">
Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet sapien quis felis imperdiet scelerisque. Maecenas vulputate, nisl quis laoreet efficitur, urna nunc viverra massa, placerat commodo ligula tellus vel lacus. Ut molestie, purus id gravida sollicitudin, ipsum ipsum scelerisque diam, quis hendrerit mauris massa vitae quam. Donec maximus, felis sit amet tincidunt pretium, justo tellus cursus ex, quis vestibulum felis risus sed velit. Vivamus varius sapien sit amet nisl iaculis, et aliquet risus lobortis. In eget ullamcorper augue. If you are interested you can call me using my email or phone number displayed on the <a id="hyperlink" href="index.html">Home</a> page.
</p>
</article>
<aside id="about-sidebar">
<div class="dark">
<img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png">
<p>
PERSON NAME
</p>
</div>
</aside>
</div>
</section>
<footer>
<p>COMPANY</p>
</footer>
</main>
</body>
Of course, as soon as I spent 10 minutes making this question I figured out my problem within literally 10 seconds lol.
I doubt anyone else would have this problem but you never know, so I'll answer it and leave it here for anyone who needs it.
In the CSS file in the media queries section, I removed '#sidebar' from 'aside#sidebar {'
I'm trying to make Iphone 6/7/8 version for my site.
Unfortuantely I do not know how to move my main menu to right corner so it would look like this in web site:
Right now the site looks like this:
Could you tell me how to move this menu?
What is more, I do not know how to move this 6 squares down to the text. I'm trying to usse marigin-bottom etc on SquaresDOWN div or UP but nothing is happening.
I'd really appreciate if you could help me with these two things.
css
*
{
margin: 0;
padding: 0;
}
header
{
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img{
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo
{
margin-top: 10px;
float: left;
}
#sign a
{
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
.left h1{
font-size: 20px;
color:rgb(0, 1, 253);
text-align: justify;
margin-left: 100px;
}
.left {
float: left;
width: 50%;
margin-right: 500px;
}
#ourteam
{
margin-top: 300px;
margin-left: 100px;
font-size: 60px;
font-weight: bold;
color:rgb(24, 188, 253);
}
#squaresUP div {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 30px;
}
#squaresDOWN div {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 30px;
}
#tytul
{
font: Bold 20px/23px Arial;
letter-spacing: 0;
color: #2699FB;
margin-left: 33px;
margin-top: 60px;
}
#tytul1
{
font: Regular 14px/30px Arial;
letter-spacing: 0;
color: #2699FB;
margin-left: 28px;
margin-top: 100px;
}
.square1 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square2 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square3 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square4 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square5 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square6 { background: #7FC4FD 0% 0% no-repeat padding-box;}
#media only screen and (max-device-width: 500px){
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
background-size:100% 3000px;
}
#ourteam
{
margin-top: 300px;
margin-left: 700px;
font-size: 80px;
font-weight: bold;
width: 400px;
color:rgb(24, 188, 253);
}
.left h1{
font-size: 27px;
width: 1500px;
color:rgb(0, 1, 253);
text-align: justify;
margin-left: 100px;
margin-top: 50px;
}
.left {
float: left;
margin-right: 500px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
width: 1150px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 35px/15px Arial;
padding: 5px;
width: 50px;
}
}
html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="css-images/style-authors.css" >
</head>
<body>
<header>
<div class="row">
<ul id ="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">NEWS FEED</li>
<li style="padding-left:10px">ABOUT DINGDOG</li>
<li style="padding-left:10px">AUTHORS</li>
<li style="padding-left:10px">CONTACT</li>
<li style="padding-left:10px" id ="sign">SIGN IN</li>
</ul>
</div>
<section>
<article>
<p id="ourteam">Our Team.</p>
<div class="left">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. ILorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. ILorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. I</h1>
</div>
<div class="row2">
<div id="squaresUP">
<div class="square1" style='position:absolute;left:1100px; top:292px;'></div>
<div class="square2"style='position:absolute;left:1350px; top:292px;background: #F1F9FF 0% 0% no-repeat padding-box;'>
<h1 id="tytul" style='position:absolute;left:0px; top:0px;'>Name Surname</h1>
<h1 id="tytul1" style='position:absolute;left:0px; top:0px;'>Co-Founder & CTO</h1>
</div>
<div class="square3"style='position:absolute;left:1600px; top:292px;'></div>
</div>
<div id="squaresDOWN">
<div class="square4"style='position:absolute;left:1100px; top:560px;'></div>
<div class="square5"style='position:absolute;left:1350px; top:560px;'></div>
<div class="square6"style='position:absolute;left:1600px; top:560px;'></div>
</div>
</div>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>
</body>
</html>
//edit
the squares should be right there. They should be centered under the text.
I have cleaned up your code a little bit and here you can find an example for how to create a header menu inside a css grid looks decent for iphone 7/8 view.
you can change the percentage based on your request to get it a bit bigger if you don't want to create more buttons,
if it doesn't helped you totally at least it could be a reference.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.row{
display: grid;
grid-template-columns: 20% 80%;
}
.main-nav{
float: right;
display: inline-flex;
list-style: none;
font-size: 50%;
}
.main-nav li{
font-size: 50%;
}
</style>
</head>
<body>
<div class="row">
<div id ="logo"><img src="css-images/dingdog-logo.png"></div>
<div>
<ul class="main-nav">
<li style="padding-left:10px">NEWS FEED</li>
<li style="padding-left:10px">ABOUT DINGDOG</li>
<li style="padding-left:10px">AUTHORS</li>
<li style="padding-left:10px">CONTACT</li>
<li style="padding-left:10px" id ="sign">SIGN IN</li>
</ul>
</div>
</div>
<!-- create your html elements and divs below -->
<!-- make sure to arrange them in a decent way to be organzied with y our page -->
<!-- i would suggest you use css grid as i did for the menu and follow almost the same settings
which will make your view look more adjusted and responsive -->
</body>
</html>
There's a problem in my code attached below:
The img with id listItemProfile stays always in middle no matter what padding I set, I though it might due to there's some padding in its parent, but I couldn't find any, any thoughts?
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
.accordionOm {
position: relative;
padding: 10px 0 10px 30px;
margin: 0;
font: 300 18px 'Oswald', Arial, Helvetica, sans-serif;
cursor: pointer;
}
.accordionOm:hover {
color: #000;
}
.accordionOm:before,
.accordionOm:after {
content: "";
position: absolute;
background: #333;
display: inline-block;
}
.accordionOm:before {
width: 20px;
height: 2px;
left: 0;
top: 22px;
}
.accordionOm:after {
width: 2px;
height: 20px;
left: 9px;
top: 13px;
transition: transform .5s;
transform: rotate(0);
}
.accordionOm.opened:after {
transform: rotate(90deg);
}
.accordionOm + div {
border-left: 4px solid #999;
padding: 0 15px;
margin-left: 8px;
font: 13px 'Open Sans', Arial, Helvetica, sans-serif;
color: #666;
}
* {
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;}
body {
width: 100%;
margin: 0 auto;
}
#trailBar{
margin-left: 35px;
margin-right: 35px;
margin-top: 25px;
margin-bottom: 25px;
height: 180px;
background: -webkit-linear-gradient(right, #31a7de, #31a7de 35px, white 35px, white);
border: transparent;
border-radius:0.25em;
}
p.trailTextTop{
padding-top: 25px;
padding-left: 25px;
padding-right: 60px;
padding-bottom: 25px;
font-size: large;
}
p.trailTextBot{
padding-left: 25px;
padding-right: 60px;
padding-bottom: 25px;
font-size: large;
}
.left { float: left; }
.right { float: right; }
p { overflow: hidden; }
.panel-group .list-group {
margin-bottom: 0;
}
.panel-group .list-group .list-group-item {
border-radius: 0;
border-left: none;
border-right: none;
}
.panel-group .list-group .list-group-item:last-child {
border-bottom: none;
}
.panel-body{
background: #efefef;
}
#listItem{
position: relative;
height: 200px;
background: #efefef;
}
#listItemProfile{
position: absolute;
height: 80px;
width: 80px;
padding-top: 60px;
padding-bottom: 60px;
padding-left: 35px;
}
#listItemTitle{
}
#listItemSubtitle{
}
#listItemInfo{
}
#listItemArrow{
}
</style>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="accordionOm opened">
<div id="listItem">
<img id = "listItemProfile" src="images/Portrait.png">
<div id="listItemTitle">
</div>
<div id="listItemSubtitle">
</div>
<div id="listItemInfo">
</div>
<div id="listItemArrow">
</div>
</div>
</h4>
<div>
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span></p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span></p>
</div>
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span></p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span></p>
</div>
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span></p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span></p>
</div>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
</body>
<script>
$('.accordionOm').next().hide();
$(".opened").next().show();
$('.accordionOm').click(function() {
if ($(this).hasClass("opened") == true) {
$(this).next().slideUp("slow");
$(this).removeClass('opened');
} else {
$(".opened").next().slideUp("slow");
$(".opened").removeClass("opened");
$(this).addClass('opened');
$(this).next().slideDown("slow");
}
});
</script>
</html>
Hi now define this css
#listItemProfile {
position: absolute;
height: 80px;
width: 80px;
/* padding-top: 60px; */
/* padding-bottom: 60px; */
/* padding-left: 35px; */
left: 50%;
top: 50%;
margin-left: -40px; // your total width img / 2
margin-top: -40px; // your total height img /2
}
You can use this css given below :
#listItemProfile {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
}
try with margin-left , margin-right
Example
.class-name{
margin-left:10px;
margin-right:50px;
}
Ok guys I have styled this very well, but there are a few quirks! I have tried everything and it looks great/good as a responsive site, but there are some issues. I cannot get the .therapy section to look the way I want it to. Full page it hugs the left margin, but looks good with my media queries. My question is how do i get it to look good on full page and be responsive as well. Thanks and hugs. I would like the margins to come in a few px and look like it is not using all the white space available. please help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="something.css" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body{
background-color: #f1f0d1;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 1.125em;
overflow: auto;
}
h1, h2, h3{
text-align: center;
padding-left: 5%;
color: #878e63;
}
p{
padding: 2%;
color: #878e63;
}
img{
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
#wrapper {
margin: 0 auto;
max-width: 1020px;
width: 98%;
background-color: #fefbe8;
border: 1px solid #878e63;
border-radius: 2px;
box-shadow: 0 0 10px 0px;
overflow: hidden;
}
#callout {
width: 100%;
height: auto;
background-color: #878e63;
overflow: hidden;
}
#callout p {
text-align: right;
font-size: 13px;
padding: 0.1% 5% 0 0;
color: #f1f0d1;
}
#callout p a {
color: #f1f0d1;
text-decoration: none;
}
header {
width: 96%
min-height: 125px;
padding: 5px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding-left: 90px;
}
nav ul li {
float: left;
border: 1px solid #878e63;
width: 15%;
}
nav ul li a {
background-color: #f1f0d1;
display: block;
padding: 5% 12%;
font-weight: bold;
font-size: 18px;
color: #878e63;
text-decoration: none;
text-align: center;
}
nav ul li a:hover, nav ul li.active a {
background-color: #878e63;
color: #f1f0d1;
}
.banner img {
width: 100%;
border-top: 1px solid #878e63;
border-bottom: 1px solid #878e63;
}
.clearfix{
clear: both;
}
.left-col {
width: 55%;
float: left;
margin: 1% 1% 1%;
}
.sidebar: {
width: 40%;
float: right;
margin: 1%;
text-align: center;
}
.therapy {
/*float: left;*/
margin: 0 auto;
width: 100%;
height: auto;
/*padding: 1%;*/
}
.section{
width: 29%;
float: left;
margin: 2% 2%;
text-align: center;
}
footer{
background-color: #878e63;
width: 100%;
overflow: hidden;
}
footer p, footer h3 {
color: #f1f0d1;
}
footer p a {
color: #f1f0d1;
text-decoration: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
ul li img {
height: 50px;
}
#media screen and (max-width: 480px) {
body{
font-size: 13px;
}
}
#media screen and (max-width: 740px){
nav {
width: 100%;
margin-bottom: 10px;
}
nav ul {
list-style-type: none;
margin: 0 auto;
padding-left: 0;
}
nav ul li {
text-align: center;
margin-left: 0 auto;
width: 100%;
border-top: 1px solid #878e63;
border-right: 0px solid #878e63;
border-bottom: 1px solid #878e63;
border-left: 0px solid #878e63;
}
nav ul li a{
padding: 8px 0;
font-size: 16px;
}
.left-col, .sidebar, .section {
width: 100%;
float: left;
margin: 0;
}
}
</style>
</head>
<!-- redo all images on the page and style with css3-->
<body>
<div id="wrapper">
<div id="callout">
<p>Call us at <strong>727-555-5555</strong></p>
</div><!--end callout div-->
<header>
<!--need ne image--><img src="http://www.w3newbie.com/wp-content/uploads/massagelogo.png" alt="Massage" title="Massage by ?">
</header>
<nav>
<ul>
<li class="active">Home</li>
<!--make active later--><li>Contact</li>
<!--make active later--><li>Pricing</li>
<!--make active later--><li>Specials</li>
<!--make active later--><li>Consult</li>
<!--make active later--><li>Consult</li>
</ul>
<div class="clearfix"></div>
</nav>
<div class="banner">
<img src="http://www.w3newbie.com/wp-content/uploads/massagebanner.png" alt="need new" title="new">
</div><!--close banner-->
<!--fix w css--><center><img src="http://www.w3newbie.com/wp-content/uploads/three_sayings.png" alt="need new" title="new"></center>
<section class="left-col">
<!--use h2 tag and css--><p style="text-indent: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at convallis eros. Ut luctus ex eget tempor scelerisque. Praesent blandit velit eu turpis aliquam pellentesque. Cras vel erat eget ligula sollicitudin commodo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at</p>
<p style="text-indent: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at convallis eros. Ut luctus ex eget tempor scelerisque.</p>
</section>
<aside class="sidebar">
<div class="therapy">
<img src="http://www.w3newbie.com/wp-content/uploads/therapist.jpg" alt="need new" title="new">
</div><!--close therapy div-->
</aside>
<div class="section">
<h3>Text Text Text Text</h3>
<img src="http://www.w3newbie.com/wp-content/uploads/private.png" alt="need new" title="new">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p>
</div><!--close section div-->
<div class="section">
<h3>Text Text Text Text</h3>
<img src="http://www.w3newbie.com/wp-content/uploads/sauna-steam.png" alt="need new" title="new">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risusIn non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p>
</div><!--close section div-->
<div class="section">
<h3>Text Text Text Text</h3>
<img src="http://www.w3newbie.com/wp-content/uploads/retreat.png" alt="need new" title="new">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risusIn non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p>
</div><!--close section div-->
<!--fix w h2 and css --><center><img src="http://www.w3newbie.com/wp-content/uploads/ease.png" alt="need new" title="new"></center>
<footer>
<div class="section">
<p>Text Text Text</p>
<p><strong>727-555-5555</strong><br>
123 Main St<br>
Anywhere, FL 33770<br>
blank#blahblah.com</p>
</div>
<div class="section">
<p>Connect with us!</p>
<ul>
<li><img src="http://www.w3newbie.com/wp-content/uploads/facebook1.png" alt="need new" title="new"></li>
<li><img src="http://www.w3newbie.com/wp-content/uploads/googleplus.png" alt="need new" title="new"></li>
<li><img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png" alt="need new" title="new"></li>
<li><img src="http://www.w3newbie.com/wp-content/uploads/youtube1.png" alt="need new" title="new"></li>
</ul>
</div>
<div class="section">
<img src="http://www.w3newbie.com/wp-content/uploads/plant.png" alt="need new" title="new">
</div>
</footer>
</div><!--end wrapper div-->
<p>© 2014.</p><!--margin 0 auto this-->
</body>
</html>
I know it is a lot, but I am stuck, I think my math is off. Please advise me how I can resolve and thank you.
I found a typo (an unecessary colon):
.sidebar: { /*here*/
width: 40%;
float: right;
margin: 1%;
text-align: center;
}
If you want to improve the use of white space, you need to make a concept at first. For example your text is currently above a huge image. Unter this huge image there are three smaller boxes.
So you could say in full screen you want the image and text next to each other. This is done by adding the following to the media query you want the text and image to appear next to each other:
aside.sidebar {
width: 40%;
float: right;
margin-right: 2%;
margin-top: 30px;
}
Then you need to insert
<div style="clear: both;"></div>
Below the closing </aside> tag! You have inserted something like this for your sidebar in line 106 with .sidebar:, which is a "broken code" because of the : after your css class.
This is a quite simple example, but works for all kinds of pages. If you need further explanations feel free to ask, this is a "quick help" copy & paste solution.
Best regards,
Marian.
what I'd like to achieve is a border-bottom 20px below my h1 tag in my sidebar and also have 20px of "white space" below my border-bottom. I'd also like to have this underneath my h1 tag in my content area.
Here's the link to what I have now
HTML:
<!-- SIDEBAR -->
<div id="sidebar">
<h1>Caul / Cbua</h1>
<div class="sidetext">
Lorem ipsumdolor sit amet, consectetur adipiscing elit. Nam laoreet mi c est dignissim, at auctor mi tristique.
</div>
<h1>Commit</h1>
<div class="sidelink">
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</div>
</div>
<!-- CONTENT -->
<div id="content">
<h1>News</h1>
<div class="article">
<img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />
<h2>Lorem Ipsum</h2>
<h3>Friday, August 16th</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
</div>
<div class="article">
<img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />
<h2>Lorem Ipsum</h2>
<h3>Friday, August 16th</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
</div>
</div>
CSS:
#sidebar {
background-color: #e7d9c9;
background-image: url('/imgs/map.png');
background-repeat: no-repeat;
position: absolute;
/* # */
height: 100%;
width: 318px;
float: left;
padding-bottom: 20px;
padding-top: 20px;
}
#sidebar h1 {
border-bottom: thick;
border-bottom-width: 75%;
}
.sidetext {
padding: 5px 20px;
font-size: 18px;
font-family: Helvetica Neue;
padding-bottom: 20px;
}
.sidelink {
padding-bottom: 20px;
margin: 0;
padding: 0;
width:300px;
}
.sidelink ul {
margin: 0;
padding: 0;
margin-left: 20px;
}
.sidelink li {
display: block;
list-style: none;
}
.sidelink li a {
display:block;
font-family: Helvetica Neue;
font-size:16px;
color:#FFF;
text-decoration:none;
background-color:#1e416f;
padding:5px;
border-left:10px solid #FFF;
padding-bottom: 20px;
}
.sidelink li a:hover {
border-left:14px solid #1e416f;
background-color:#e7d9c9;
color: #1e416f;
}
h5 {
font-family: Helvetica Neue: Light;
font-size: 24px;
color: #517f9c;
}
/* Content */
#content {
width: 642px;
float: right;
padding-top: 20px;
}
.article {
padding: 5px 20px;
}
.articleimg {
float: left;
padding-right: 25px;
}
Try this and see how you go
#sidebar h1 { border-bottom: 1px solid black; margin-bottom: 20px; }
h1 {
border-bottom: 20px solid #000000;
}
AND
h1 {
margin: 0 0 20px 0;
}
OR
h1 {
margin-bottom: 20px;
}
Combine both rules though... So more like this:
h1 {
margin: 0 0 20px 0;
border-bottom: 20px solid #000000;
}
#sidebar h1 { border-bottom: 20px solid black; margin-bottom: 20px; }
If you want it for all h1
h1 { border-bottom: 20px solid black; margin-bottom: 20px; }
Try this CSS:
div > h1 { border-bottom: 20px solid black; margin-bottom: 20px; }