I think I don't perfectly understand inline, block, float, etc. and was hoping for some help. I'm trying to achieve this setup:
The idea is to display the most common languages our clients use. I want to have a block that has the top 5 most common, with the most common getting a spotlight section. Then just list the rest of the languages underneath.
However, my code just pushes everything to the left, and the lets the rest of the page (like the footer) next to it. I want the top language and the next 4 to be next to each other, in the center of the screen, without affecting the page below it.
body {
font-family: Arial;
transition: all ease .5s;
text-align: center;
color: rgb(58,58,58);
}
#footer ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #666;
}
#footer li {
float: left;
}
#footer li p {
display: block;
color: #555;
text-align: center;
padding: 7px 16px;
}
br {
display: block;
}
#footer li a {
display: block;
color: #555;
text-align: center;
text-decoration: none;
}
#footer li a:hover {
display: block;
color: #555;
text-align: center;
text-decoration: underline;
}
#language-stats li {
display: inline-block;
padding: 13px;
margin: 6px;
border-radius: 5px;
color: rgb(58,58,58);
background-color: rgb(210,210,210);
font-weight: bold;
}
#top-5 {
width: 600px;
}
#top-1 {
float: left;
width: 250px;
height: 300px;
background-color: #fff;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
text-align: center;
}
#next-4 {
float: left;
width: 350px;
height: 300px;
background-color: #f5f5f5;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
</head>
<div id="languages">
<div id="top-5">
<h3>Top Languages</h3>
<div id="top-1">
<svg height="70" width="60">
<circle cx="30" cy="40" r="30" fill="#CECECE" />
<text x="18" y="53" style="font-size: 40;
stroke: #fff;
fill: #fff">1</text>
</svg>
</div>
<div id="next-4">
<ul>
<li>2: Example</li>
<li>3: Example</li>
<li>4: Example</li>
<li>5: Example</li>
</ul>
</div>
</div>
<div id="language-stats">
<h3>Language Stats</h3>
<ul id="language-stats-list">
<li>Languages Represented: 37</li>
<li>Coolest Language: Example</li>
</ul>
</div>
</div>
<br />
<hr />
<div id="footer">
<ul>
<li><p>Download CSV</p></li>
<li><p>Link to dictionary</p></li>
</ul>
</div>
</body>
</html>
(You have to see the snippet in full page to witness the issue.)
What am I missing to have the cleaner layout I desire?
In your example, if you'd like the language-stats div to appear under your floated top-1 and next-4 elements, you'll just need to add the style clear: left to language-stats. This will effectively line-break it below the other two elements.
Additionally, you'll want to add margin: 0px auto to the styles of the top-5 div- this will equally space the left and right margins of your 600px-wide element and center it on the page.
Related
So far, I have managed to get my footer to always stick to the bottom, however, I have been struggling to get the content or images on my webpage to push the footer down. I have been trying absolute, fixed, relative positions for the footer but to no avail as the content in the class "container2" continues to go under the footer. It also shouldn't be sticky footer similar to the nav bar but like a natural footer where it is pushed down by content.
HTML/CSS: https://jsfiddle.net/jof0hzhc/2/
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<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>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body class="bg2">
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ResponsiveNav
</div>
<div class="menu">
<ul>
<li>Home</li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
<li>Current page</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section class="content">
<p class="apphead">Heading</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container2">
<p class="apptext">Sub-heading</p>
<div class="games">
<img src="images/1.png">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<br><br><br><br><br><br><br><br>
</div>
</section>
</div>
<footer>
<p class="foot">
Footer text. <br>
__________________________________________________________________________________________________ <br> <br>
About us
|
Contact us <br>
__________________________________________________________________________________________________
<section>
<p class="foot">Social Media</p>
<span class="social">
<img src="images/mail.png" alt="Mail" width="50px" height="50px"/>
<img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/>
<img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/>
</span>
</section>
<section>
<h3>All rights reserved<br></h3>
</section>
</p>
</footer>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
width: 98%;
background-color: black;
min-height: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
font-weight: lighter;
}
header {
width: 98%;
height: 13vh;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
width:100%;
position:absolute;
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
p {
color: black;
position: relative;
margin: 5px;
padding: 10px;
}
a { /*General styling for links to other pages or websites*/
text-decoration:none;
position:relative;
font-family: Trebuchet MS, sans-serif;
}
h2 { /*Styling for site title*/
font-size: 50px;
text-align:left;
color:white;
margin: 20px;
font-family: courier;
}
h3 {
font-size:20px;
padding-left:20px;
color: white;
}
.content { /*the main container that consists of most of the existing content*/
margin-top:5px;
width:100%;
height: 1400px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
.welcome {
font-family: courier;
}
.inquiry {
font-size: 17px;
color: white;
}
.container2 {
background-color: darkgrey;
padding: 10px;
margin: 0;
width: 97.8%;
height: 1000px;
z-index: 0;
position:absolute;
overflow:hidden;
}
p.heading {
font-size: 25px;
font-weight: bold;
font-family: courier;
}
.foot {
color: white;
}
.bg2 {
background-image:url("hex.jpg");
height: 550px;
width: 102%;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
width: 640px;
height:250px;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
First off, I am a bit confused why you are using the <br> tag so much, but it almost looks like you are trying to space the elements with them. You may want to use padding or margin to do that.
Lastly, I think what you are looking for is position: fixed. Try this:
footer {
width:100%;
position: fixed; /* use fixed instead of absolute */
bottom: 0; /* set bottom to 0 */
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
You have several problems in your css. The main problem for your content not to appear is that you're using overflow: hidden; in container2 and height: 1000px; this causes everything that exceeds 1000px won't be show. Try removing overflow: hidden or overflow: x-scroll.
This is the documentation for the overflow property, I suggest you read it for a better understanding of your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
There are some things that you should change 1. you are using absolute position outside relative 2. using absolute values for hight is not good practice 3. is always better use padding and margin to make space ect. Keep fixed position only for header nav and comment out all fixed hight values(px)and absolute and relative positioning to start with. Absolute position should be inside relative if there is not special reason not to do that. To get out from main problem start with footer and container2. But there is lot more to fix.
You need set a min-height for html, body {min-height: 100vh;}
Set footer as position: fixed; bottom: 0; left: 0;
Hopefully this will help you.
Ok I'm recreating a PSD I found online for practise. In the header there is a search bar and button. To the right of the button there is extra content taking up space, which I can't get rid of.
I have added a jsfiddle
https://jsfiddle.net/jb7j6ysz/
Please ensure the preview is expanded to the left as much as possible
<!DOCTYPE html>
<html>
<head>
<title>Education Compaony</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="branding">
<h2>Education Department</h2>
<h5>A free PSD template</h5>
</div> <!-- /.Branding -->
<div class="directory">
<div class="search">
<input type="text">
<input type="submit" value="Search">
</div> <!-- /.Search -->
<div class="index">
<ul>
<li>A - Z index | </li>
<li>Studenet Login | </li>
<li>Staff Login </li>
</ul>
</div> <!-- /.Index -->
</div> <!-- /.Directory -->
</div> <!-- /.Header -->
</body>
</html>
/* Font Import */
#import url('https://fonts.googleapis.com/css?family=Lora');
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.header{
height: 95px;;
background-color: #FCD05D;
color: #3A302E;
font-family: 'Lora', sans-serif;
}
.branding {
float: left;
margin-left: 200px;
}
.branding h2 {
margin-top: 10px;
text-transform: uppercase;
font-size: 28px;
}
.branding h5 {
margin-top: -20px;
font-size: 16px;
}
.directory {
float: right;
margin-right: 200px;
}
.search {
background-color: black;
border: 5px solid black;
border-radius: 8px;
padding: 1px 0px 5px 12px;
}
.search input[type=text] {
background-color: #FCD05D;
border-radius: 3px;
}
.search input[type=submit] {
background-color: #595657;
color: #FCD05D;
border: 2px solid #595657;
border-radius: 3px;
}
.index ul {
list-style-type: none;
text-decoration: none;
margin-top: -0;
}
.index li {
margin-top: -20px;
font-size: 14px;
display: inline-flex;
word-spacing: 1px;
}
The extra space is coming from the ul where your links are. Since the width is auto, the list section has a greater width than your search section so the search section takes on that width.
You can set padding: 0 to the ul list to reduce some of the space. It has a natural padding to the left. This will still leave some space on the right because of the length of your list. You can set width to the search area to prevent the list from wrapping. Or you could make the search section float left but you will need to adjust padding to make it look symmetrical
Here is an example
https://jsfiddle.net/jb7j6ysz/3/
.search {
background-color: black;
border: 5px solid black;
border-radius: 8px;
padding: 1px 12px 5px 12px;
float: left;
}
.index ul {
list-style-type: none;
text-decoration: none;
margin-top: 0;
padding: 0;
}
I used float for the new fiddle and added padding 0 to the ul. Also adjusted the padding on .search
The index div is in the way. Update your css with this
.index{
position: absolute;
display:block;
left: 40%;
}
The extra space is coming because of your Ul items. Add this in your css
ul{
padding-left:0px;
}
I think your problem is to do with the width of the .index div. Both it and your search bar are contained within the same .directory div. Because both are block-level elements with their width set to the default auto, they take on the width of their parent, which in this case is set by the largest child, the .index div.
By setting the search bar to display: inline-block;, it will only take up as much width as it needs.
.search {
...
display: inline-block;
}
Additionally, the ul used for the .index div has padding-left by default, which you may want to set otherwise.
I am trying to create a 3 column webpage. My bullets for the unordered and ordered lists are not aligning with the corresponding text in the column. Also, for my middle column the text is scrunched together. How do I space the paragraphs apart?
* {
font-family: Melvetica;
margin: 0px;
padding: 0px;
}
body {
background-color: #6B6A67;
}
#container {
width: 920px;
background-color: white;
padding: 10px;
margin-left: auto;
/*will center your page*/
margin-right: auto;
/*will center your page*/
}
h1,
h2 {
text-align: center;
}
li {
text-align: center;
padding: 5px;
}
h4 {
padding: 5px;
text-align: center;
}
/*To style an ID within an ID under it use the parent ID--start with header then call the ID you want to select*/
#container #header {
height: 80px;
background-color: #ADA9A0;
padding-top: 20px;
padding-left: 10px;
padding-right: 20px;
margin-bottom: 5px;
/*To add empty space to bottom of the element*/
}
#container #navigation {
margin-top: 5px;
background-color: #ADA9A0;
color: white;
padding-top: 5px;
padding-bottom: 5px;
border: 2px solid #ADA9A0;
}
#container #content {
background-color: #D9D5CE;
min-height: 300px;
margin-top: 5px;
margin-bottom: 5px;
/*To add empty space to bottom of the element*/
}
#container #content #sidebar1 {
background-color: #ADA9A0;
float: left;
width: 25%;
min-height: 300px;
margin-bottom: 3px;
}
#container #content #column1 {
background-color: white;
min-height: 300px;
margin-bottom: 3px;
width: 50%;
float: left;
margin: 0;
}
#container #content #sidebar2 {
background-color: #ADA9A0;
float: right;
width: 25%;
min-height: 300px;
margin-bottom: 3px;
}
#container #footer {
padding-top: 1px;
border-top: 1px solid black;
}
.CR {
text-align: left;
position: fixed;
}
.Instructor h4 {
text-align: right;
position: fixed right;
}
/*NAV LINKS - add an "a" to style items under the ID'S*/
#container #navigation a {
color: white;
text-decoration: none;
/*gets rid of the underlining effect*/
padding-top: 5px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
}
/*To add a hover put a:hover*/
#container #navigation a:hover {
color: red;
background-color: white;
}
#container #content #left {
font-family: Arial;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="HTML.CSS.css" />
<title>My Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<h1> CIS 2336- Internet Applications </h1>
<h2> DeVoll </h2>
</div>
<div id="navigation">
Home
HTML/CSS
PHP
</div>
<div id="content">
<div id="sidebar1">
<h4> Instuctor: Natalia Fofanova </h4>
<ul>
<li>Lectures</li>
<li>Syllabus</li>
<li>Helpful Videos</li>
</ul>
</div>
<div id="column1">
<h2> HTML and CSS </h2>
<p>HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for bulding a website.
<p>
<p>HTML provides a structure for the page by using "Hypertext" which refers to the hyperlinks that an HTML page may contain. Also, "Markup language" refers to the way tags are used to define the page layout and elements within the page.</p>
<p>CSS provides the visual layout of web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML. CSS helps Web developers create a uniform look across
several pages of a Web site. Instead of defining the style of each table and each block of text within a page's HTML, commonly used styles need to be defined only once in a CSS document.</p>
</p>
</div>
<div id="sidebar2">
<h4> Homework and Projects </h4>
<ul>
<li>Module 1</li>
<li>Module 2</li>
<li>Module 3</li>
<li>Welcome Button</li>
<li>2-column Webpage</li>
</ul>
</div>
</div>
<footer>
<div id="footer">
<div class="CR">
<h4> Copyright 2016 </h4>
</div>
<div class="Instructor">
<h4>Copyright Natalie Fofanova </h4>
</div>
</footer>
</body>
</html>
Declare a line-height to the 2nd section.
Example
#second p {
line-height: 20px;
}
http://www.w3schools.com/cssref/pr_dim_line-height.asp
p{
text-align: justify;
text-align-last: left;
padding-left: 10px;
padding-right: 10px;
}
Add this to your CSS hope it will work
As your code should change like the below code:
#content ul{
margin:0;
padding:0;
display:block;
}
#content ul li {
text-align: center;
padding: 0px;
list-style-type:none;/* if you really wants bullets remove this line*/
}
* {
font-family: Melvetica;
margin: 0px;
padding: 0px;
}
body {
background-color: #6B6A67;
line-height:20px;
}
#column1 p{padding:4px;}
.clearfix{clear:both;}
To change your min-height should be min-height: 320px; instead of 300px.
You want to more clarity in this question. please tell me we will suggest some more points.
i will update your code jsfiddle.
Demo
p{
padding: 0 0 10px 0;
}
just padding down would make sure space between all paragraph
I have posted some of this code before, trying to get the sidebar links in the right places and look a special way, I have decided to go in a different direction with that. What I need now is know what I am supposed to do to get the div that I have labeled "content" next to the sidebar instead of below it. I've tried everything. The sidebar and the content div are in the same div together and I've tried displaying in inline, inline-block. Nothing works. I just want them next to each other and level. Can you help me out again? Thanks so much!
Code displayed here: http://jsfiddle.net/eNUpJ/11/
HTML
</div>
<div id="wholething">
<div id="sidebar">
<h3>Navigation Links</h3>
<div id="sidelinks">
<div id="buttons">Home
</div>
<div id="buttons">Biography
</div>
<div id="buttons">News
</div>
<div id="buttons">Music
</div>
<div id="buttons">Contact
</div>
</div>
</div>
<div id="content">
<p>News stuff and things</p>
</div>
</div>
</body>
CSS
#sidebar {
background: #464646;
width: 250px;
height: 500px;
margin-left: 50px;
border-radius: 15px;
position: relative;
}
h3 {
font-family:'Coda', cursive;
color: white;
background: #6B6B6B;
font-size: 24px;
text-align: center;
padding: 15px 0 8px 0;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#sidelinks {
font-family:'Armata', sans-serif;
width: 250;
font-size: 25px;
text-decoration: none;
color: white;
background-color: #4D4D4D;
padding: 10px;
line-height: 40px;
}
#buttons a {
text-decoration: none;
color: white;
}
#content {
position: relative;
width: 750px;
border-radius: 15px;
background: #464646;
}
#wholething {
display: inline;
}
Give both #content and #sidebar float: left. You should also remove display:inline from #wholething. Also, you should know that if you want to add anything below the #content and #sidebar - for instance, a footer, with a copyright statement or such - you'll need to give it clear:both, which will force it to be below the two floated divs.
I'm trying to make a sidebar which on a website which will have a "panel" in it containing
contact info. The problem is that on smaller screens, the text overflows the background.
Here is the CSS, where #navigation is the outer div and the inner div is called .innerPanel HTML to follow:
#navigation{
position: absolute;
left: 1.5625em;
top: 1.5625em;
bottom: 1.5625em;
display: block;
width: 12.5em;
background: navy;
border-right: 1px solid navy;
text-align: center;
background: #B6D2F0;
padding: 5px;
color: #4A4A49;
overflow: hidden;
}
#navigation .innerPanel{
min-height: 200px; /* supply current height here */
height: auto;
overflow: auto;
}
.titleHead{
display: block;
padding-top: 0.9em;
overflow: auto;
}
/* inverted corners for the links */
#navigation #links {
position: relative;
padding-top: 30px;
}
#navigation #links div div div h3{
border-top: 1px solid navy;
border-bottom: 1px solid navy;
color: navy;
padding: 0px;
margin: 0px;
margin-top: 1px;
line-height: 1.2em;
}
#navigation div div div div ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navigation div div div div ul li{
text-align: center;
}
#navigation div div div div ul li a{
display: block;
text-decoration: none;
font-weight: bold;
color: #B6D2F0;
padding: 0px;
padding-left: 0;
line-height: 2.5em;
background: navy;
border-bottom: #D8F4F2 1px dashed;
}
#navigation div div div div ul li a:hover{
display: block;
text-decoration: none;
font-weight: bold;
color: #D8F4F2;
background: #0000A2;
}
#navigation div div div div ul #last a{
border-bottom: 0px;
}
`
Here is the HTML fragment. The nested div tags were for rounded corners, which were "nixed" by the client
<div id="navigation">
<div id="logo" class="box">
<div>
<div>
<div style="text-align: center;">
<img src="./images/pictures/cbk-logo-sm.gif" alt="Logo" />
</div>
</div>
</div>
</div>
<div id="links" class="box">
<div>
<div>
<div> <ul>
<li id="home">
Home
</li><li>
Applications
</li><li id="last">
About
</li>
</ul><div class="innerPanel"><div class="innerMost"><h4 class="titleHead">
Contact Information</h4>
<h5 style="margin: 0.8em 0 0 0; padding: 0;">City Office (September-June)</h5>
<p style="font-size: 0.75em; margin: 0; padding: 0;">
<em>Phone:</em> 555-555-5555<br />
<em>Fax:</em> 555-555-5555<br />
<em>Email:</em> email#provider.com<br />
<em>Address:</em> 123 Main Avenue Somewhere, IL 11234
</p>
<h5 style="margin: 0.8em 0 0 0; padding: 0;">Camp (July & August)</h5>
<p style="font-size: 0.75em; margin: 0; padding: 0;">
<em>Phone:</em> 987-654-3210<br />
<em>Fax:</em> 123-456-1234<br />
<em>Email:</em> email#provider.com<br />
<em>Address:</em> 456 Centre Road, Nowhere, AL 67891
</p></div></div> </div>
</div>
</div>
</div>
</div>
I need a cross-browser solution to make innerPanel dynamically add a scrollbar to itself so that on smaller screens, the content is clipped but accessible via scroll...
Preferably, the solution should be pure CSS.
Any ideas?
EDIT: I apologize for the ambiguity. I have a sidebar, called #navigation. It contains a logo, the menu and the contact information. I want the contact info to scroll where needed.
Everything else seems to display normally on 800x600 screens and up.
EDIT: As it stands now, innerPanel is a fixed height. I would like it to grow when possible, and if there is enough room, eliminate the scrollbar.
Please note that there is an HTML div not mentioned in the CSS, which is contained inside of innerPanel.
I am a little unclear what you are asking, but it seems to me you either want overflow:auto on the #navigation element, or depending on your content and why it has a fixed height:
#navigation .innerPanel {
max-height: 200px; /* supply current height here */
height: auto;
overflow: auto;
}
DOES NOT WORK IN IE6
IE6 does not support max-height.