The idea to develop my own blog's theme just poped into my mind, probably I enjoy making my own things, but I have very little experience in CSS and HTML, so I've run into some weird problems already.
Actually, it's about the footer. I've written a large piece of code and now I'm trying to trace back the problem, but no results yet. I've used the search here, analyzed some of the similar problems, still no result. Even wrapped everything still nothing.
What I'm trying is to make footer appear at the very bottom of the page content but it always pops on the bottom of the browser's window (somewhere in the middle of the content). Could you guys take a look at the code - I'd really appreciate help, because I've heard there are some good coders slash helpers here.
Please, do not take me as an idiot or something like that. Newbie, that's who I am! Just that.
Styles.css
h
tml{
min-height: 100%;
}
body {
margin: 0;
padding: 0;
font: 16px Georgia;
line-height:25.88854px;
color:#222222;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#footeris {
position: absolute;
bottom:-20px;
height: 100px;
min-width: 100%;
background: #00a651;
}
#blogheader {
min-width: 100%;
height: 55px;
background: #00a651;
position: fixed;
z-index:3;
}
#menu {
width: 900px;
height: 55px;
background: #00a651;
display: block;
margin: auto;
}
#social {
width: 200px;
height: 55px;
display: block;
float: right;
margin: auto;
}
#twitter {
margin-top:12px;
margin-right: 15px;
float: right;
}
#twitter:hover
{
margin-top:15px;
}
#googleplus:hover
{
margin-top:15px;
}
#youtube:hover
{
margin-top:15px;
}
#googleplus {
margin-top:12px;
margin-right: 15px;
float: right;
}
#youtube {
margin-top:12px;
margin-right: 15px;
float: right;
}
#menubutton1 {
display:inline-block;
height:55px;
background: #00a651;
}
#menubutton1:hover
{
background-color:#000000;
}
#navigacija {
width: 600px;
height:55px;
float: left;
padding:0;
}
#navigacija li {
display:inline;
}
#navigacija li a {
font-family:Arial;
font-size:20px;
font-weight: bold;
text-decoration: none;
letter-spacing: 1.5px;
padding-top:100%;
padding-bottom:14px;
padding-left:18px;
padding-right:18px;
background-color: #00a651;
color:#ffffff;
}
#navigacija li a:hover {
background-color:#000000;
}
#name {
position:relative
color: #FFFFFF;
padding-top: 18px;
padding-left: 9px;
padding-right: 9px;
height:55px;
}
#name a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
#line {
margin-left: auto;
margin-right: auto;
height: 7px;
background: #C9C9C7;
}
#blogbody {
width: 1024px;
min-height:100%;
margin-left: auto;
margin-right: auto;
padding-bottom:60px;
z-index:2;
}
#myinfo {
float: right;
max-width: 300px;
background: #DDE3DC;
z-index: 1;
border-bottom: 2px solid #cccccc;
display:inline-block;
}
#myinfotext {
margin-bottom: 20px;
font: 17px Georgia;
line-height:25.88854px;
color:#222222;
text-align:left;
padding-left:40px;
}
a {
color: #00a651;
text-decoration: none;
}
h1 {
font-size: 25px;
font-weight:normal;
font-family: Helvetica Neue;
color: #474A46;
}
#me {
margin-left:auto;
margin-right:auto;
background: url(images/me.png) no-repeat;
width: 120px;
height: 120px;
}
#content {
width: 615px;
float: left;
margin-top: 55px;
min-height:100%;
}
#blogprojects {
width: 615px;
height: 200px;
display: block;
float: left;
padding: 20px;
border-bottom: 1px solid #cccccc;
}
#newsfeed {
width: 615px;
float: left;
padding: 20px;
padding-top: 15px;
}
#blogpost {
width: 615px;
float: left;
padding: 20px;
}
#blogsidebar {
width: 300px;
min-height: 100%;
background: #DDE3DC;
display: block;
float: right;
border-left: 2px dashed #cccccc;
padding: 25px;
margin-top: 55px;
z-index:1;
}
#blogwidget {
margin-top: 20px;
width: 300px;
display:inline-block;
border-bottom: 2px solid #cccccc;
}
#blogwidgetcontent {
margin-bottom: 20px;
}
HTML Code
<!DOCTYPE HTML>
<html>
<head>
<title>Lukas Valatka Blog</title>
<link rel="stylesheet" href="styles.css">
</link>
</head>
<body>
<div id="wrapper">
<div id="blogheader">
<div id="menu">
<div id="navigacija">
<ul id="navigacija">
<li>POSTS</li>
<li>About</li>
<li>About</li>
</ul>
</div>
<div id="social">
<div id="twitter">
<img src="images/social/twitter.png" alt="Twitter" >
</div>
<div id="googleplus">
<img src="images/social/googleplus.png" alt="Google Plus" >
</div>
<div id="youtube">
<img src="images/social/youtube.png" alt="Youtube" >
</div>
</div>
</div>
<div id="line">
</div>
</div>
<div id="blogbody">
<div id="content">
<div id="blogprojects">
<h1>Recent Projects</h1>
test
</div>
<div id="linijele">
</div>
<div id="newsfeed">
<h1>What's Going On</h1>
<div id="blogpost">
<h2>Test</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus, ante at gravida condimentum, nibh eros bibendum dolor, non aliquam augue velit sit amet lectus. Phasellus pellentesque diam quis metus fermentum sollicitudin. Suspendisse suscipit, enim quis ultricies congue, lectus sem luctus orci, non lacinia nunc ante non augue. Praesent at ante lectus. In quam magna, eleifend ornare facilisis sed, dignissim a nunc. Nullam ultricies vulputate lorem nec sagittis. Nullam vulputate nisi vel lorem pharetra volutpat. Suspendisse dui est, consectetur malesuada consequat nec, egestas et lorem. Nulla facilisi. Maecenas eleifend pulvinar tincidunt. Donec eu orci at libero ultricies ornare. Suspendisse potenti. Nullam tortor ante, rutrum ut sollicitudin at, pulvinar vel orci. Sed semper sem tincidunt urna cursus et ultrices tortor aliquet. Vestibulum pellentesque arcu dictum nisl mollis auctor.
Proin ut vehicula risus. Nulla ut urna sit amet neque commodo venenatis. Nulla hendrerit tincidunt tellus, congue convallis orci porta non. Nam sollicitudin ultricies dui, id dignissim odio tempus eu. Fusce viverra condimentum euismod. Suspendisse mauris magna, pulvinar venenatis porttitor id, interdum a purus. Donec nisi augue, semper eu fermentum ac, blandit at justo. Phasellus aliquet ultrices dapibus. Donec nibh libero, tempus ut pellentesque a, aliquet ut libero. In hac habitasse platea dictumst. Nam eget nunc lectus, in commodo odio.
Nulla a justo nunc, quis sollicitudin ante. Proin mi magna, tempor sit amet porttitor volutpat, luctus eu sem. Vestibulum porttitor arcu eget magna vulputate quis laoreet massa mollis. Maecenas justo nibh, ornare elementum ornare quis, aliquam sit amet velit. Cras hendrerit consequat viverra. Aenean eget libero at urna viverra rutrum. Fusce eleifend tincidunt dignissim. Nam pellentesque aliquam lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Etiam massa nisl, luctus sollicitudin congue non, suscipit ac justo. Morbi pretium elementum urna, et dignissim lectus viverra vel. Duis sit amet massa felis, ut consequat dolor. Nullam in justo lectus, id rutrum metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent fringilla urna rutrum orci dignissim a mollis leo varius. Vivamus accumsan neque a nisl ornare vel ultricies eros ultrices. Quisque nec odio non libero pellentesque molestie in ut quam. Phasellus feugiat consequat nunc, commodo venenatis tortor volutpat eget. Curabitur tristique posuere mollis. Quisque sit amet lacus nec elit fermentum laoreet sed vitae neque. Sed sem leo, fermentum eu sagittis in, auctor eget lacus. Duis lacus orci, semper vitae faucibus vitae, bibendum ac augue. Curabitur at felis ac mi dictum adipiscing.
</div>
</div>
</div>
<div id="blogsidebar">
<div id="myinfo">
<div id="me">
</div>
<center>
<h1>
L
</h1>
<div id="myinfotext">
Hey
</div>
</center>
</div>
<div id="blogwidget">
<div id="blogwidgetcontent">
<h1>
Latest Tweets
</h1>
<a class="twitter-timeline" data-tweet-limit="3" href="https://twitter.com/" data-widget-id="3168357470">Tweets by #L</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
</div>
</div>
<div id="footeris">Copyright 2013.</div>
</div>
</body>
</html>
An easy solution is to use floats, and clear it if needed.
Lets say you got 4 div's, a header, content, sidebar and footer:
.header { width:100%; height:100px; float:left; }
.content { width:65%; float:left; }
.sidebar { width:35%; float:right; }
.footer { width:100%; float:left; clear:both; }
Use the Chrome console (rightclick-inspect element) to see what is happening and adjust where needed if you're unsure.
Related
I am in the process of building a website for a customer. MY problem is with one page. Whenever the page goes to a different sized viewing window the entire page breaks. I have already set a viewpoint, and even tried switching all of my pixel values, to show percents of the page. None of this however has fixed my problem. Below is my code for the broken web page. I have tried using the div tag to try and create spacing, yet it never works, no matter what I try I can't get it to view properly on other viewing platforms. This includes mobile and when the browser is not in full screen.
HTML:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<script type="text/javascript" src="mainjs.js"></script>
<link rel="stylesheet" href="maincss.css">
<link rel="shortcut icon" href="tb.jpg">
</head>
<header>
<center>
<img src="FIMM USA Columbus.jpg" class="logo">
<p><em><strong>About Us</strong></em></p>
</center>
</header>
<body>
<hr class="yellowb">
<table style="width:100%;">
<th>Home</th>
<th>Products</th>
<th>About Us</th>
</table>
<hr class="yellowb1">
<div class="round">
<center><h3>Important Name Here</h3></center>
<p class="white2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum non nulla non tempor. Praesent quam augue, finibus eu nibh vitae, rutrum pellentesque dui. Nam orci dolor, euismod sit amet arcu in, fringilla aliquet est. Aliquam rhoncus et nibh a lobortis. Phasellus tempus tincidunt turpis, at sollicitudin risus dapibus id. Donec accumsan sem blandit ex faucibus, in aliquam metus molestie. Etiam ac metus risus. Phasellus vitae semper est. Pellentesque sed accumsan neque. Duis mattis euismod ante ac sollicitudin. Duis quis leo nec velit mattis volutpat vel quis dui. Vestibulum pretium felis massa, ac pretium nisi congue iaculis. Nunc at dolor consectetur, molestie odio vitae, tempus odio. Fusce erat nulla, facilisis id sodales nec, mattis et orci. Nam et tortor est.</p>
</div>
<div style="float:left;"><img src="gray.jpg"></div>
<div class="round">
<center><h3>Important Name Here</h3></center>
<p class="white2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum non nulla non tempor. Praesent quam augue, finibus eu nibh vitae, rutrum pellentesque dui. Nam orci dolor, euismod sit amet arcu in, fringilla aliquet est. Aliquam rhoncus et nibh a lobortis. Phasellus tempus tincidunt turpis, at sollicitudin risus dapibus id. Donec accumsan sem blandit ex faucibus, in aliquam metus molestie. Etiam ac metus risus. Phasellus vitae semper est. Pellentesque sed accumsan neque. Duis mattis euismod ante ac sollicitudin. Duis quis leo nec velit mattis volutpat vel quis dui. Vestibulum pretium felis massa, ac pretium nisi congue iaculis. Nunc at dolor consectetur, molestie odio vitae, tempus odio. Fusce erat nulla, facilisis id sodales nec, mattis et orci. Nam et tortor est.</p>
</div>
<div style="float:left;"><img src="gray.jpg"></div>
<div class="round">
<center><h3>Important Name Here</h3></center>
<p class="white2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum non nulla non tempor. Praesent quam augue, finibus eu nibh vitae, rutrum pellentesque dui. Nam orci dolor, euismod sit amet arcu in, fringilla aliquet est. Aliquam rhoncus et nibh a lobortis. Phasellus tempus tincidunt turpis, at sollicitudin risus dapibus id. Donec accumsan sem blandit ex faucibus, in aliquam metus molestie. Etiam ac metus risus. Phasellus vitae semper est. Pellentesque sed accumsan neque. Duis mattis euismod ante ac sollicitudin. Duis quis leo nec velit mattis volutpat vel quis dui. Vestibulum pretium felis massa, ac pretium nisi congue iaculis. Nunc at dolor consectetur, molestie odio vitae, tempus odio. Fusce erat nulla, facilisis id sodales nec, mattis et orci. Nam et tortor est.</p>
</div>
<div style="float:left;"><img src="gray.jpg"></div>
</body>
<footer>
</footer>
</html>
CSS:
body {
background-color: #0d0d0d;
color: yellow;
font-family: arial;
height: 100%;
padding-left: 15%;
padding-right: 15%;
}
.logo {
height: 25%;
width: 25%;
}
.yellowb {
background-color: yellow;
height: 10px;
width: 100%;
border: none;
}
.yellowb1 {
background-color: yellow;
height: 6px;
width: 100%;
border: none;
}
button {
background-color: yellow;
color: black;
height: 40px;
width: 70px;
}
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
height: 20px;
width: 80px;
background-color: yellow;
color: black;
}
.buildt {
height: 15%;
width: 50%;
}
.rightdiv {
float: right;
width: 65%;
height: 40%;
text-decoration: outline 3px solid yellow;
}
.largery {
font-size: 30px;
color: yellow;
font-family: Arial;
}
.white {
color: white;
font-size: 20px;
text-indent: 50px;
}
.product {
height: 90%;
width: 90%;
}
.rline {
border-left: none;
border-right: 8px solid yellow;
border-top: none;
border-bottom: none;
width: 34%;
height: 40%;
float: left;
}
.ltext {
width: 100%;
height: 40.5%;
}
.white1 {
color: white;
font-family: arial;
font-size: 20px;
text-align: center;
vertical-align: center;
text-indent: 45px;
}
.white2 {
color: white;
font-family: arial;
font-size: 14px;
text-align: center;
vertical-align: center;
text-indent: 45px;
}
.scale {
width: 100%;
height: 100%;
}
.div1 {
border: 5px solid yellow;
padding: 15px;
}
.left {
padding-left: 10px;
width: 20%;
}
.right {
padding-right: 10px;
width: 20%;
}
.middle {
width: 55%;
}
.round {
border-radius: 15px;
border: 5px solid yellow;
width: 75%;
height: 15%;
float: right;
}
.round1 {
border-radius: 15px;
border: 5px solid yellow;
width: 100%;
height: 40%;
}
.oh {
width: 100%;
height: 100%
}
It's not a good idea to rely on viewports alone to render a page. You should be adding media queries to your code. https://www.w3schools.com/css/css3_mediaqueries.asp
Also, when putting that code in jsfiddle.net, nothing is "breaking" per see. It just looks like it's not mobile responsive.
I am working on my portfolio for school (I am a developer on Mediacollege Amsterdam) and I need help with my css. I have searched for answers, but I cannot get my page as desired. I have 3 divs, i want 2 of them to be next to each other and the third one below the first one, how would I do that?
I want the picture where it's at and I want the block that starts with "my tasks" where it is, but I want the block that starts with "About the game" positioned directly underneath the image
This is how I have the divs sorted, the div gameplay is the video, the div info is the "my tasks" block and the about div is the "about the game" block.
<div class="item">
<div class="legend">Fear The Blue</div>
<div class="content">
<div class="gameplay">
<video autoplay loop muted>
<source src="resources/video/portfolioVideos/FTB.webm" type="video/webm" />
<source src="resources/video/portfolioVideos/FTB.mp4" type="video/mp4" />
Video not available :(
</video>
</div>
<div class="info">
<span class="tit">My tasks:</span>
<ul>
<li>Puzzle logic</li>
<li>First puzzle</li>
<li>Second puzzle</li>
<li>Audio Manager</li>
<li>Controller support</li>
<li>Inventory</li>
<li>Outline Shader</li>
<li>Movement</li>
<li>Start menu</li>
<li>VR support</li>
<li>Keypad logic</li>
<li>Performance improvements</li>
<li>Door/teleport logic</li>
</ul>
<span class="tit">Engine:</span> Unity3D
<br />
<span class="tit">Language:</span> C#
<br />
<span class="tit">team:</span>
<ul>
<li>2 programmers</li>
<li>3 artists</li>
<li>2 mediamanagers</li>
</ul>
</div>
<div class="about">
<span class="tit">About the game:</span>
<ul>
<li>Single player puzzle game</li>
<li>Oculus support</li>
<li>Best played with controller</li>
</ul>
I've chosen to put this game on my portfolio, because this is my first oculus game. I am also proud of my audiomanager class, inventory class and the endproduct.
</div>
</div>
<div class="foot">
<img class="git" src="resources/images/resources/GithubIcon.png" />
<!--<img class="trailer" src="Images/resources/filmklapper.png"/>-->
<a><img class="game" src="resources/images/resources/controller.png" win="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Win.zip" mac="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Mac.zip" web="SchoolFiles/IDP/FearTheBlue/web-build/FearTheBlue.html" /></a>
<a><img class="game" src="resources/images/resources/oculus.png" win="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Win_Oculus.zip" mac="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Mac_Oculus.zip" /></a>
</div>
</div>
My full css:
.item
{
font-family: normalFont, sans-serif;
margin: 0.9em auto 0.5em auto;
background-color: #222222;
border-radius: 1em;
display: block;
color: white;
width: 95%;
}
.item .legend
{
font-family: headerFont, sans-serif;
border-top-right-radius: .5em;
border-top-left-radius: .5em;
padding: 0.2em 0 0.2em 0.4em;
background-color: #4CAF50;
font-size: 1.2em;
}
.item .content{padding: .5em;}
.item .gameplay
{
max-width: 100%;
display: block;
margin: 0 auto;
}
.item .gameplay video{width: 100%;}
.item .gameplay img{width: 100%;}
.item .info
{
text-align: left;
display: block;
height: auto;
}
.item .info :visited,
.item .info a:link
{
text-decoration: none;
color: darkorange;
}
.item .info a:hover
{
text-decoration: underline;
color: lightblue;
}
.tit{color: #4CAF50;}
.item ul
{
padding: 0 0 0 1em;
margin: 0;
}
.item li{list-style-type: "- ";}
.item .foot
{
border-radius: 0;
border-bottom-right-radius: .5em;
border-bottom-left-radius: .5em;
background-color: #4CAF50;
width: 100%;
height: 2em;
}
.item .foot a
{
margin: 0.05em 0 0 0.6em;
display: inline-block;
width: 30px;
float: left;
}
.item .foot img
{
cursor: pointer;
width: 100%;
}
.item .foot .game, .item .foot .git{margin-top: 1px;}
#popup .message
{
text-align: center;
margin: 1em;
}
#popup
{
width:11em;
border-radius: .5em;
outline:none;
height:7em;
background-size: 100% 100%;
background-color: #333;
z-index:2;
position:absolute;
margin:0 0 0 -4.56em;
}
.input-group
{
width: 85% !important;
margin: .5em auto !important;
}
.input-field
{
background-color: #222 !important;
border: 1px solid #111 !important;
}
.input-field:hover
{
background-color: #111 !important;
}
.icon-background
{
border: 1px solid #111 !important;
}
#media screen and (min-width:600px){.item{width: 80%;}}
#media screen and (min-width:1000px)
{
.item{width: 60%;}
.item .legend{font-size: 2em;}
.item .gameplay
{
display: inline-block;
margin-top: .3em;
width: 25em;
float: left;
}
.item .about
{
width: 20em;
}
.item .info
{
display: inline-block;
margin: 0 0 0 1em;
max-width: 40%;
}
}
regards,
Dani
Try removing the property
float:left for the image div
Or you can put the two divs that want to be one below the other in one big div and the div you want at right outside in a different div.
From the information you provided, I think you're trying to make a 2 column layout. If you're floating all of your div containers to the left, since you added your "about" div last in your html and because your 2 first div's take up the full width of the container, your third div will be positioned below the div with the greatest height. If you want to avoid this You should use 2 divs (one for each column). Float them both left and add your content inside your respective columns.
.container {
position: relative;
width:100%;
}
.col1{
position: relative;
float:left;
width:60%;
}
.col2 {
position: relative;
float: left;
width: 40%;
}
img {
max-width:100%;
}
<div class="container">
<div class="col1">
<div class="image">
<img src="http://www.telegraph.co.uk/content/dam/pets/2016/03/18/bunny-large_trans_NvBQzQNjv4BqqVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg" />
</div>
<div class="about">
bla bla bla
</div>
</div>
<div class="col2">Cras quis venenatis est, in pretium eros. Duis a rutrum sem, ac ultricies nunc. Nulla non placerat turpis, a elementum lorem. Duis porttitor, tortor eu congue feugiat, arcu dolor pellentesque ante, sit amet ullamcorper mauris elit quis dui. Suspendisse sem lacus, viverra eget nunc id, ornare volutpat eros. Aliquam erat volutpat. Maecenas eu efficitur neque. Curabitur tortor ex, dictum tempor neque vitae, semper suscipit arcu. In at velit non velit molestie fringilla nec a nunc. Integer et tincidunt risus. Integer finibus, arcu eu hendrerit tincidunt, ante urna vestibulum ante, sit amet accumsan turpis purus id arcu. Curabitur non aliquet sapien, malesuada imperdiet orci. Sed posuere lectus ac nulla viverra, consequat semper lorem commodo. In fermentum nisl lacus, non congue velit sagittis sit amet. Phasellus mollis diam mi, id mollis lectus imperdiet ut. Mauris egestas neque urna, vehicula cursus nisi auctor vitae.
Aliquam ornare vitae urna auctor pretium. Ut vestibulum suscipit volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras viverra lorem non ex maximus, tempus gravida justo tempus. Pellentesque fermentum volutpat tortor ut pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut efficitur mattis tortor. Fusce et lectus pulvinar, sollicitudin leo interdum, molestie risus. Nullam non consectetur arcu. Phasellus congue, eros vel euismod pulvinar, erat ex viverra velit, vitae bibendum arcu odio in dolor. Maecenas efficitur massa faucibus pretium accumsan. Duis id suscipit neque.
Nulla pulvinar tempus dui, vitae pellentesque orci dapibus id. Nullam hendrerit egestas dui. Nullam tempus mattis dui. Proin in rutrum purus. Vivamus tempor justo mauris, non bibendum dui luctus ac. Nunc vulputate libero velit, sed auctor nulla mattis ut. Nullam finibus mollis ante eget rhoncus. Suspendisse at purus ante. Vivamus tristique felis eu quam pulvinar, nec viverra quam porta. Phasellus gravida enim non sem facilisis maximus. In varius ac lacus nec convallis. Quisque molestie commodo mi in fermentum.
</div>
</div>
This is very basic CSS and I'm sure if you google enough you will find other grid methods (as mentioned above) that will make your layouts a whole lot easier. Hope this helps.
I need some help to hide the background color of my container div.
The main content area is structure in such a way that the article tags stack on top of each other and then after that the footer should take up whatever space is left.
I have tried to get rid of the space between the article tag and the footer while still keeping the margin. In order words I want to get rid of the blue line while.
Can someone give me a hint of how to achieve this?
#container {
background-color: #004bb8;
min-width: 320px;
max-width: 960px;
}
/*------Header-----*/
header {
background-color: lightsalmon;
border-bottom: solid #65ff09 2px;
}
h1, h2 {
font-family: "Impact";
margin: 0px;
padding: 0px;
color: darkred;
text-align: left;
text-transform: uppercase;
letter-spacing: 4px;
}
#image-container {
float: left;
width: 46%;
margin: 0 1% 0 1%;
padding: 1%;
}
#sitename{
float: left;
width: 46%;
margin: 0 1% 0 1%;
padding: 8% 1% 1% 1%;
}
header::after {
content: "";
display: block;
clear: left;
}
header img {
width: 250px;
margin: 0 auto;
}
header h1 {
font-family: "Abel", sans-serif;
text-transform: uppercase;
font-size: 1.5em;
padding: 10px 10px;
color: #f9db00;
}
header h2 {
font-family: "Abel", sans-serif;
text-transform: uppercase;
font-size: 0.8em;
padding: 10px 10px;
color: #ff2a86;
}
/*-------navigation------*/
nav {
width: 100%;
background-color:
}
nav ul li {}
nav ul li a {
display: block;
text-align: center;
border-radius: 5px;
padding: 0.5em;
margin: .3em;
border: 1px solid #fff;
background-color: #004bb8;
text-decoration: none;
color: #fff;
}
nav ul li.active a {
background-color: #b8005c;
}
nav ul li a:hover {
background-color: #f9db00;
color: #323C40
}
/*-------content------*/
#content {
min-height: 5em;
background-color: #fff;
}
#content article {
margin: 0 2%;
}
#content article.News, #content article.Tweets {
background-color: #ddd;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
article.News h2, article.Tweets h2 {
background-color: darkgray;
color: #fff;
padding: 0.5em;
font-size: 0.8em;
}
article.News h2 {background-color: #004bb8;}
article.Tweets h2 {background-color: #b8005c;}
article.News h3, article.Tweets h3 {
padding: 0.5em 0 0 1%;
font-size: 1.0em;
}
article.News h3 {color: #004bb8;}
article.Tweets h3 {color: #b8005c;}
article.News p, article.Tweets p {
color: #666;
font-size: 0.8em;
padding-left: 1%;
padding-right: 1%;
line-height: 120%;
}
#contents article.Tweets::after {
content: "";
display: block;
clear: left;
}
/*-------footer------*/
footer {
clear: both;
text-align: center;
padding: 1em;
background-color: #111;
color: #fff;
font-size: 0.6em;
}
/*---------IMAGES------------*/
figure.w100 {
overflow: hidden;
width: 100%;
}
figure.w33 {
width: 96%;
border: 1px solid #999;
margin: 0.3em 0 0.3em 2%;
}
figure.w33 img {
width: 100%;
}
figure.w100 img {
width: 100%;
}
#content figcaption {
text-align: center;
font-size: 0.6em;
color: #777;
padding: 0.3em;
}
<body>
<div id="wrapper">
<div id="container">
<header>
<div id="image-container">
<img src="img/logo.png" alt="logo">
</div>
<div id="sitename">
<h1>Responsive Design</h1>
<h2>Don't Settle for Less</h2>
</div>
</header>
<!--------Page Navigation Links -->
<nav>
<ul>
<li>Desktop Work Around</li>
<li class="active">Phone-Default</li>
<li>Tablet Enhancement</li>
<li>Reset CSS</li>
</ul>
</nav>
<!--------Page Content -->
<div id="content">
<figure class="w100">
<img src="img/lake.jpeg" alt="lake">
</figure>
<article>
<h2> Lorem Ipsum</h2>
<figure class="w33">
<img src="img/car.jpeg" alt="car">
<figcaption> what i wish to drive when i get super rich</figcaption>
</figure>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
<div class="row">
<article class="News">
<h2>News</h2>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
<article class="Tweets">
<h2>Tweets</h2>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
</div>
</div>
<!-----End of Content --->
<footer>
<p>© Buko Ogbobe Responsive Start File</p>
</footer>
</div> <!----end of Container ---->
</div> <!----end of Wrapper ---->
</body>
Here's two solutions, you can use :
footer {
margin-top:-13px;
}
or :
#content article.Tweets, article.Tweets p {
margin-bottom:0px;
}
This will fix the gap in between your footer and content.
I have a page with a container holding a div and within that there are two more divs, side by side. As the view gets smaller, I want the div on the right to disappear and the div on the left to take up the entire parent div.
I've been having problems implementing this. When I tried an absolute position on the div it does expand to the fill width of the parent but it also pops out of the parent (sort of). When I tried a transition as was suggested elsewhere that just didn't do anything useful. Then I tried z-index and changing the margin to a - but that didn't seem to work either. A nudge in the right direction would be great.
.box {
background-color: #F28B20;
border-radius: 5px;
height: auto;
margin-bottom: 150px;
width: 80%;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
background-image: url("../Images/logo_faded_background.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.sidebar {
float: right;
width: 29%;
margin-left: 0;
margin-right: 3%;
text-align: left;
color: #171581;
}
.whiteBoxHalf {
float: left;
width: 54%;
background: rgba(255, 255, 255, 0.6);
border-color: #000000;
border-width: 1px;
border-style: solid;
margin-left: 3%;
margin-right: 5%;
margin-bottom: 15px;
padding: 15px;
}
#media (max-width: 1019px) {
.header {
font-size: small;
}
.header li a {
padding: 20px 10px;
}
.sidebar {
display: none;
}
.whiteBoxHalf {
width: 95%;
}
}
<div class="box">
<div class="row">
<div class="whiteBoxHalf"></div>
<div class="sidebar"></div>
</div>
</div>
You could do something like this, using display:table-row and overflow:hidden. Fiddle
.box, .whiteBoxHalf {
min-width: 300px;
}
.box {
background-color: #F28B20;
border-radius: 5px;
margin-bottom: 150px;
width: 80%;
box-shadow: 10px 10px 5px #888888;
overflow: hidden;
}
.row {
display: table-row;
}
.sidebar {
display: table-cell;
margin-left: 0;
margin-right: 3%;
text-align: left;
color: #171581;
background: green;
}
.whiteBoxHalf {
display: table-cell;
background: rgba(255, 255, 255, 0.6);
border-color: #000000;
border-width: 1px;
border-style: solid;
margin-left: 3%;
margin-right: 5%;
margin-bottom: 15px;
padding: 15px;
width: 60%;
box-sizing: border-box;
}
<div class="box">
<div class="row">
<div class="whiteBoxHalf">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc scelerisque consequat porta. Praesent a odio lorem. Donec scelerisque mauris nibh, ut finibus ipsum semper eget. Praesent dapibus ante et diam condimentum tempus. Vivamus nisl nisl, finibus in neque non, maximus pretium est. In hac habitasse platea dictumst. Quisque dapibus faucibus nisl. Donec vel tincidunt est, blandit imperdiet eros. Integer blandit finibus vestibulum. Mauris vel ante quis neque congue ullamcorper in vitae quam. Morbi pretium elementum ante, eget suscipit enim elementum sit amet. Integer ornare, risus euismod tincidunt lobortis, arcu ligula lobortis lectus, in egestas est quam sed massa. Etiam porta, neque eget cursus gravida, sem nisl convallis erat, ut pharetra felis ex ac odio. Nunc aliquam enim quis nulla auctor suscipit. Maecenas id enim eu purus hendrerit interdum nec id est.
</p>
</div>
<div class="sidebar">
<p>
Praesent sem tortor, volutpat at volutpat lobortis, luctus eget tellus. Nulla facilisi. Vestibulum sodales mauris non sapien volutpat hendrerit. Curabitur quis vestibulum nulla. Pellentesque justo risus, vestibulum ac ligula eu, interdum lacinia lorem. Sed ornare libero nunc. Morbi vitae fringilla ipsum. Nulla tempor viverra odio eget ultrices. Etiam fermentum erat viverra ex rhoncus, eget lacinia arcu semper. Aliquam lobortis massa ac tincidunt vestibulum. Nam ex ligula, molestie vel luctus eu, pretium quis lacus. Cras tincidunt nisl nec viverra condimentum.
</p>
</div>
</div>
</div>
If this is not the desired behaviour, you will probably want to use media queries to target specific screen resolutions, and show/hide the sidebar accordingly. Example:
.sidebar {
display: none;
}
#media (min-width: 800px) {
.sidebar {
display: block;
}
}
I'm trying to create a list of horizontal items so they can be used as navigation. But for some reason, setting display to inline is not working. I have also tried setting display to inline-block with no results. Any suggestions?
CSS
#page {
margin-top: 2em;
background: #00000
}
#pageborder {
background-color: white;
margin-left: 150px;
margin-right: 150px;
}
body, html {
padding: 0;
margin: 0;
background-color: #EEEEEE;
height: 100%;
font-family:"Monospace", Lucida Console;
font-size: 16;
}
h1 {
font-size: 28pt;
}
h2 {
margin:0;
padding-bottom: 7px;
font-size: 22;
}
p {
margin-bottom:0px;
padding-bottom:0px;
}
#header {
height:50px;
background-color: none;
border-color: #E7E7E7;
font-size: 28pt;
color: white;
padding-top: 20px;
padding-bottom: 5px;
margin-top: 108px;
}
#content {
position: left;
color: #5E5849;
background-color: white;
border: 2px solid;
border-color: #EEEEEE;
text-align: left;
padding: 1em 2em 4em;
margin-left: 20px;
margin-right: 322px;
}
#sidebar {
float:right;
margin-right: 180px;
position: absolute;
top:;
right:0;
text-align: left;
width: 250px;
border: 2px solid;
border-color: #EEEEEE;
padding-top: 8px;
padding-left: 40px;
}
#twitter {
display: inline;
float: left;
margin-bottom: 10px;
margin-right: 20px;
}
#youtube {
display: inline;
float: left;
margin-bottom: 10px;
margin-right: 20px;
}
#google {
display: inline;
float: left;
margin-bottom: 10px;
margin-right: 20px;
padding-bottom: 2px;
}
#justin {
display: inline;
float: left;
margin-bottom: 10px;
margin-right: 20px;
}
#Social {
border-bottom: solid thin grey;
padding-bottom: 7px;
font-size: 15px;
margin-top: 10px;
}
#profilepic {
margin-bottom: 10px;
}
* {
margin: 0;
}
.footer {
margin-left: 100px;
height: 2em;
color: white;
clear: both;
background-color: black;
}
th {
text-align: left;
padding-right: 2em;
}
#nav {
width:100%;
height:30px;
background-color:#999;
}
#nav ul {
display: inline-block;
list-style-type: none;
height:150px;
color: red;
padding-left: 150px;
}
#nav ul li {
display:inline;
}
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="template.css" />
<title>Template</title>
</head>
<body>
<div id="page">
<div id="pageborder">
<div id="header">
<img src="banner.png" width=600 height=74.18>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Links</li>
</ul>
</div>
<div id="sidebar">
<table>
<tr>
<div id="Social"><p><b>Social</b></p></div>
<p>
<div id="youtube">
<a href="http://www.youtube.com/ksheehan77" target="_blank">
<img src="youtube_icon.png" width=36 height=36>
</a>
</div>
<div id="twitter">
<a href="http://www.twitter.com/#!/ksheehan77" target="_blank">
<img src="Twitter.png" width=32 height=32>
</a>
</div>
<div id="justin">
<a href="http://www.justin.tv/ksheehan77" target="_blank">
<img src="justintv.png" width=32 height=32>
</a>
</div>
<div id="google">
<a rel="author" href="https://profiles.google.com/110661467085975877308/" target="_blank">
<img src="http://ssl.gstatic.com/images/icons/gplus-32.png" width="32" height="32">
</a>
</div>
</p>
</tr>
</table>
</div>
<div id="content">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus nunc eget sem iaculis pharetra. Integer sodales interdum accumsan. In et diam neque. Praesent eget erat id lectus rutrum placerat a a purus. Integer molestie arcu vel orci iaculis sagittis consequat mauris hendrerit. Fusce placerat leo ac tortor fringilla posuere. Quisque et enim nisl, eu laoreet nibh. Sed vitae turpis leo. Etiam dictum pretium faucibus. Nam quis ornare nibh. Sed ultricies lacinia dolor ac ullamcorper. Sed dictum enim ut urna consequat quis bibendum mi eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec blandit nisi vitae dui blandit ultrices.</p>
<p>Aliquam enim ligula, pharetra at scelerisque eu, imperdiet vel lorem. Phasellus faucibus nunc ac purus imperdiet eleifend. Praesent id scelerisque massa. Suspendisse sed ornare lectus. Duis eget lacus quam, quis pharetra magna. Phasellus rhoncus, lectus et dictum accumsan, diam justo volutpat urna, ac auctor leo velit in augue. Proin eget nisi vel turpis hendrerit tempor sed a odio. Phasellus lacinia placerat lobortis. Vestibulum consequat bibendum semper. Vivamus cursus eros non felis gravida fermentum. Donec pulvinar, nisl a varius volutpat, ante lectus varius erat, ac sodales nisl nulla sed eros. Nam bibendum cursus bibendum. Nam id orci vitae odio consequat vestibulum eu vitae ipsum. Fusce ullamcorper pretium est, eget elementum mauris tristique vitae.</p>
<p>Suspendisse facilisis mauris eget mi tempus porta. Morbi viverra, libero sed posuere porta, est purus commodo nunc, ac interdum lacus eros et turpis. Pellentesque consequat sagittis elit vel imperdiet. Pellentesque elementum, eros eget vestibulum tempor, justo metus volutpat purus, sed viverra justo odio et erat. Maecenas id urna quam. Praesent auctor congue venenatis. Aenean dolor nisl, viverra vitae ornare sed, pretium sed nibh. Pellentesque pharetra pellentesque ipsum, in ornare lacus iaculis vel. Aliquam quis arcu lectus, eu pretium est. Integer a urna dui, vel tincidunt magna.</p>
<p>Nulla mauris felis, mollis at egestas at, suscipit at sem. Donec tincidunt, tellus at consectetur consectetur, elit nisi ullamcorper dolor, vel posuere odio sapien quis ligula. Proin nunc arcu, commodo id hendrerit pulvinar, hendrerit a ligula. Nulla sagittis iaculis est, eleifend mollis dolor ullamcorper a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc non urna non nulla mollis rhoncus. Mauris eu urna tortor, et tincidunt diam.</p>
<p>Ut vehicula sodales nisi eu viverra. Donec nec sollicitudin nisi. Quisque tristique massa vel felis gravida iaculis. Proin a urna quis lacus facilisis viverra. In lacus nunc, faucibus sed luctus sit amet, tempor vitae nunc. Sed erat urna, ultricies non pretium at, vehicula id nibh. Sed sed dolor nisl. Duis nisi felis, euismod sit amet pulvinar ac, hendrerit vel tellus. Fusce vehicula tristique pellentesque. Cras molestie laoreet viverra.</p>
</div>
</div>
</div>
</div>
<center>
<div class="footer">Kieran Sheehan - 2012</div>
</center>
</body>
</html>
Works using:
<html>
<head>
<style type="text/css">
#nav{
width:100%;
height:30px;
background-color:#999;
}
#nav ul{
height:150px;
color: red;
padding-left: 150px;
}
#nav ul li{
display:inline;
list-style-type: none;}
</style>
</head>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Links</li>
</ul>
</div>
</html>
Try refreshing your browser using Ctrl+F5 - it may have cached some results that didn't work.
works well for me. Do you have some other css rules that could conflict with these ones? You could check which styles are applied to your "li" with the chrome developper console, maybe.
By the way, "list-style-type" is meant to be used with "ul" or ol", not with "li".
Although your css does not include such a property, make sure your li elements don't clear (i.e. clear:left / clear:right / clear:both)
To double check, add this into your css (using !important is bad, only use it for testing)
#nav ul li{
clear: none !important;
}
try adding floating too to see if you manage to get your elements to appear on the same line. If you still have no luck, there is definitely something wrong with your setup that's not apparent from the code you pasted.
#nav ul{
display: inline-block;
list-style-type: none;
height:150px;
color: red;
***padding-left: 150px;***}
I think here you did mistake; Remove padding for ul, might b it'll work