I'm having a problem that's driving me crazy because I know the solution is likely right in front of my eyes. I have a dropdown menu that I want to change on the screen reaching a size. Here is the snippet of what it it is like when it's unedited.
.box {
float: left;
position: relative;
top: -50px;
max-height: 45px;
max-width: 150px;
}
.box button {
float: left;
background-color: #34495e;
border: none;
color: white;
width: 150px;
height: 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Quicksand';
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$("#Dropdown").click(function() {
$("#Home").toggle();
$("#Profile").toggle();
$("#Group").toggle();
$("#Projects").toggle();
});
});
</script>
</head>
<body>
<div id="container">
<div class="dropdown">
<button id="Dropdown">
<img src="menu.png">
</button>
</div>
<div class="box">
<button id="Home">Home</button>
</div>
<div class="box">
<button id="Profile">Profile</button>
</div>
<div class="box">
<button id="Group">Group</button>
</div>
<div class="box">
<button id="Projects">Projects</button>
</div>
</div>
</body>
</html>
This works fine and how I want it. But my trouble comes when I try to change the float value when the screen reaches a certain size by doing the following:
#media screen and (max-width: 768px) {
#Dropdown {display: block;}
.box button {
float: top;
display: inline-block;
}
.box {
float: top;
position: static;
top: 0;
margin-top: 10px;
max-height: 45px;
max-width: 150px;
}
}
But for some reason it doesn't work right. It should appear like the following page:
.box {
float: top;
margin-top: 0px;
max-height: 45px;
max-width: 150px;
}
.box button {
float: top;
background-color: #34495e;
border: none;
color: white;
width: 150px;
height: 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Quicksand';
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$("#Dropdown").click(function() {
$("#Home").toggle();
$("#Profile").toggle();
$("#Group").toggle();
$("#Projects").toggle();
});
});
</script>
</head>
<body>
<div id="container">
<div class="dropdown">
<button id="Dropdown">
<img src="menu.png">
</button>
</div>
<div class="box">
<button id="Home">Home</button>
</div>
<div class="box">
<button id="Profile">Profile</button>
</div>
<div class="box">
<button id="Group">Group</button>
</div>
<div class="box">
<button id="Projects">Projects</button>
</div>
</div>
</body>
</html>
This is a pretty long winded question so any help on this would be greatly appreciated!
As I know, there is no css command float:top;. float can take the parameters: left, right, none, inline-start, inline-end.
Related
My ultimate goal is to be able to fit my grid in 2 columns perfectly and also so it fits entire screen on my mobile devices. Right now, I still have to scroll down a bit, however that is not what I wanted. I want my screen to be not scrollable but have images/screen fit in perfectly the way I desire. Getting rid of spaces in between 2 columns perhaps. Right now my screen looks bit off and needs a little scrolling. The 2 pictures on the bottom doesn't fit and requires scrolling like shown on the picture.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/swiper.min.css') }}">
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
top: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow-y: auto;
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
body {
margin: 0;
padding: 0;
background-color: white;
font: 10px/13px 'Lucida Sans', sans-serif;
}
.wrap {
overflow: hidden;
margin: 10px;
}
.box {
float: center;
position: relative;
width: 200%;
padding-bottom: 100%;
}
.boxInner {
position: absolute;
left: 50px;
right: -5px;
top: -10px;
bottom: 10px;
overflow: hidden;
}
.fixed {
position: absolute;
left: 30px;
right: 10px;
top: -10px;
bottom: 10px;
overflow: hidden;
}
.boxInner img {
width: 79%;
height: 75%
}
.boxInner img.img2 {
width: 100%;
height: 50%
}
body.no-touch .boxInner:hover .titleBox,
body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 100;
}
#media only screen and (max-width: 480px) {
/* Smartphone view: 1 tile */
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.box {
width: 50%;
padding-bottom: 30%;
}
}
.topnav {
overflow: hidden;
background-color: #66CDAA;
}
.topnav a {
float: center;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #98FB98;
color: white;
}
.topnav .icon {
display: none;
}
.header1 {
margin: auto;
float: center;
padding: 15px;
font-size: 20px;
}
</style>
</head>
<body class="no-touch">
<!-- Swiper -->
<div class="topnav" id="myTopnav">
Let's Get To Know You!
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- Define all of the tiles: -->
<div class="header1">What's your skin color?</div><br><br>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/U8pJVY0.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/Kz06qEO.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/43tH7Td.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/3uZKpV2.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/SF3vYC9.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/8hujzfl.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/cxvELu2.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/zLD3Nv1.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/baYebAV.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/iLd0ukK.png" />
</div>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="../dist/js/swiper.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='swiper.min.js') }}"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
});
</script>
<script type="text/javascript">
$(function() {
// See if this is a touch device
if ('ontouchstart' in window) {
// Set the correct body class
$('body').removeClass('no-touch').addClass('touch');
// Add the touch toggle to show text
$('div.boxInner img').click(function() {
$(this).closest('.boxInner').toggleClass('touchFocus');
});
}
});
</script>
</body>
</html>
It's because your "swiper container" is height:100%, but starts 33px down because of the element above it. You could try calc() css if your browser target range allows it in order to make it 100% height minus the height of the element above. Something like:
height: calc(100% - 33px);
I am editing a simple search bar. My plan is to have two buttons above the search bar, that are responsive. With one button floating to the right and one button floating to the left.
However, I cannot seem to get the buttons to stop coming out they are not inline with the search bar, almost "Out of its container".
Code:
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { clear: left; display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</body>
</html>
Image:
Option 1:
.Wrap your inner elements of container in another wrap, and set the margin on that element.
Option 2:
Is in snippet, apply margin to icons, and input itself. I added 3 lines of code to your snippet.
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
margin-left: 35px; /* 1) MOVING FIRST IMAGE FROM SIDE */
}
#faupload {
float: right;
margin-right: 35px; /* 2) MOVING 2ND IMAGE FROM RIGHT SIDE */
}
input {
border: 1px solid #F1F;
width: calc(100% - 70px); /* 3) 100% - HOW MUCH MARGIN DO YOU WANT AROUND INPUT? */
border-radius: 3px;
height: 35px;
margin: 0 35px; /* 4) APPLY MARGIN TO INPUT */
}
span.clear { clear: left; display: block; }
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
Here is a way to do it using flexbox, with much more less code in CSS and in HTML
.container,
.icons {
display: flex;
flex-wrap: wrap;
width: 100%
}
.icons {
justify-content: space-between
}
.searchbar {
flex: 1
}
#searchbox {
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="icons">
<div id="falist">
<i class="fa fa-list" aria-hidden="true"></i>
</div>
<div id="faupload">
<i class="fa fa-upload" aria-hidden="true"></i>
</div>
</div>
<div class="searchbar">
<input id="searchbox" type="search" />
</div>
</div>
take out that clear:left from span.clear
Snippet below
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
vertical-align:top;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</div>
</body>
</html>
.icons{
margin-left: 37px;
margin-right: 37px;
}
This works to get them on top where the red boxes are. If not exactly, just tweak them.
I managed to fix this issue by adding the following code to the element .icons hope it helps!
.icons{
margin: 0 31px;
}
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { clear: left; display: block; }
.icons{
margin: 0 31px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</body>
</html>
I face some problem in my html and css.
My requirement like this image:-
My code below:-
#font-face {
font-family: "OpenSans-CondLight";
src: url('fonts/OpenSans-CondLight.woff') format('woff');
}
#font-face {
font-family: "Rubik-BoldItalic";
src: url('fonts/Rubik-BoldItalic.woff') format('woff');
}
#font-face {
font-family: "RobotoSlab-Regular";
src: url('fonts/RobotoSlab-Regular.woff') format('woff');
}
/*header area */
header{
height: 350px;
background: #050000;
overflow: hidden;
display: block;
}
.container{
background: #050000;
}
.top-area{
float: left;
width: 20%;
font-family: "Rubik-BoldItalic";
font-size: 60px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
}
.logo-area {
width: 60%;
overflow: hidden;
display: block;
position: relative;
z-index: 9999;
}
.logo-area img {
width: 500px;
height: auto;
z-index: 9999;
margin-left: 35px;
}
.search-box {
width: 25%;
float: right;
margin: -300px 73px 0 0;
}
.all-events {
overflow: hidden;
background: #FF9D34;
height: 100px;
width: 80%;
margin: auto;
display: block;
position: absolute;
top: 178px;
border-radius: 10px;
z-index: 0;
}
.all-events .left-side span{
float: left;
color: #000000;
text-transform: uppercase;
font-size: 25px;
padding-left: 20px;
padding-top: 40px;
}
.all-events .left-side .glyphicon {
font-size: 45px;
color: #000;
}
.all-events .right-side span{
float: right;
color: #000000;
text-transform: uppercase;
font-size: 25px;
}
.main-content {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
background: #FF931D;
margin: auto;
}
.main-content .left-content .top-content{
float: left;
overflow: hidden;
display: block;
width: 55%;
height: 340px;
margin-top: 22px;
}
.main-content .left-content .top-content img {
width: 600px;
height: 300px;
}
.main-content .left-content .bottom-content{
float: left;
overflow: hidden;
display: block;
width: 75%;
height: 340px;
margin-top: 10px;
}
.main-content .left-content .bottom-content img {
width: 600px;
height: 300px;
}
.main-content .right-content {
float: right;
overflow: hidden;
display: block;
width: 40%;
margin: -688px 52px 0 0;
}
.main-content .right-content img {
width: 522px;
height: 648px;
}
footer{
overflow: hidden;
display: block;
height: 410px;
width: 90%;
margin: auto;
background-color: #FF931D;
}
footer .left-footer {
float: left;
width: 350px;
overflow: hidden;
display: block;
}
footer .middle-footer {
width: 350px;
overflow: hidden;
display: block;
}
.about {
height: 400px;
width: 400px;
border-radius: 50%;
background: #fff;
float: right;
position: relative;
top: -79px;
}
.about p {
position: absolute;
font-family: "OpenSans-CondLight";
font-size: 25px;
text-align: center;
top: 62px;
}
.about img {
width: 80px;
height: auto;
position: relative;
top: 240px;
left: 98px;
margin-left: 31px;
}
.button {
font-size: 15px;
color: blue;
cursor: pointer;
}
.button:active{
color: #000;
}
.caption {
background: #fff;
width: 599px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="IE=edge">
<title>Spotlight</title>
<!-- style -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!-- js -->
<link rel="stylesheet" type="text/css" href="js/modernizr.js" media="all" />
</head>
<body>
<header>
<div class="container">
<div class="top-area">
<h2>24 hour event</h2>
</div>
<div class="logo-area">
<img src="images/logo.gif" alt="Logo">
</div>
<div class="search-box">
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
<div class="all-events">
<div class="left-side">
<span>donate here</span>
<div class="donate_img">
<img src="images/07.tif" alt="">
</div>
</div>
<div class="right-side">
<span>all events faq</span>
</div>
</div>
</div>
</header>
<section class="main-content">
<div class="container">
<div class="left-content">
<div class="top-content">
<img src="images/damien-rice-tour-italia.jpg" alt="">
<div class="caption">
<span>Damien Rice, Kildare Culture Centre at 8pm. Ref: DMK</span>
<div class="button">
Book now
</div>
</div>
</div>
<div class="bottom-content">
<img src="images/glenhansard_100x445.jpg" alt="">
<div class="caption">
<span>Glen Hansard, Olympia Theatre Dublin at 7pm. Ref: GHO </span>
<div class="button">Book now
</div>
</div>
</div>
</div>
<div class="right-content">
<img src="images/tommytiernan.jpg" alt="">
<div class="caption">
<span>Tommy Tiernan, Cork Comedy Club at 7pm. Ref: GHO</span>
<div class="button">Book now
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="left-footer">
<span>Click on the blue <div class="button">Book now</div> now link on any
event enter your email and you will recive your
ticket via email.
Alternativly or if you have any questions not
listed on the faq tab you can book your tocket
dierectly with us qouting the event refrence
number.
</span>
</div>
<div class="middle-footer">
<span>phone:0741237451
email:24hourevent#spotlight.ie
get involved
Would you like to volunteer even one
hour of your time. Make a diffrence
contact us at:
volunteer#spotlight.ie
</span>
</div>
<div class="about">
<p>ABOUT <br>
Focas Ireland works with
people who are homeless or
who are at risk of losing there
homes across ireland.
<br> Focas Ireland website click </p>
<img src="images/d2c4efe596a6d313c1005ff33ff627ff.jpeg" alt="focus">
<img src="images/here_fixed_wm.jpg" alt="download">
</div>
<div class="social-icons">
<img src="images/youtube heart shaped free social media icon .png" alt="you tube">
<img src="images/Facebook heart shaped free social media icon.png" alt="facebook">
<img src="images/twitter heart shaped free social media icon.png" alt="twitter">
</div>
</div>
</footer>
</body>
</html>
My main problem is in my footer I can't change the color. Image bottom side. Can anyone help me?
You can try adding this line of CSS:
footer:after {
content: "";
display: table;
clear: both;
}
I saw in a previous post that the solution to prevent those annoying bullets to show up in our beautifull HTML was adding this: list-style-type: none; in our CSS.
It looks this way right now
Okay, but the problem is the following: I am using: display: list-item; and if I add that css code it changes to this
As you can see it gets all messed up.
Any possible way to prevent all that mess or removing bullets without that happening? And keeping the same structure, 5 columns in a row with the same size, and allowing some of those to be "double data" (left floated and right floated)
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="plantilla.css">
<script src="plantilla.js"></script>
<head>
<title>Plantilla</title>
</head>
<body>
<input type="text" id="input" class="input" value="" autofocus />
<div id="main" class="main">
<div id="header">Main</div>
<div id="global1" class="global">
Global1
<div id="small11" class="small">
<div class="izq">asdfasdf asdfasdfasdf</div>
<div class="der">1234</div>
</div>
<div id="small12" class="small">aaaa</div>
<div id="small13" class="small">ssss</div>
<div id="small14" class="small">ddd</div>
<div id="small15" class="small">ffff</div>
</div>
<div id="global2" class="global">
Global2
<div id="small21" class="small">abcdef</div>
<div id="small22" class="small">fedcba</div>
<div id="small23" class="small">facbde</div>
<div id="small24" class="small">decfab</div>
<div id="small25" class="small">bacfed</div>
</div>
<div id="global3" class="global">
Global3
<div id="small31" class="small">eeeeee</div>
<div id="small32" class="small">eabdc</div>
<div id="small33" class="small">bcdae</div>
<div id="small34" class="small">dcbea</div>
<div id="small35" class="small">eadcb</div>
</div>
<div id="global4" class="global">
Global4
<div id="small41" class="small">decab</div>
<div id="small42" class="small">baced</div>
<div id="small43" class="small">becad</div>
<div id="small44" class="small">daceb</div>
<div id="small45" class="small">cedab</div>
</div>
<div id="global5" class="global">
Global5
<div id="small51" class="small">cadeb</div>
<div id="small52" class="small">cadeb</div>
<div id="small53" class="small">cedab</div>
<div id="small54" class="small">eadcb</div>
<div id="small55" class="small">aebdc</div>
</div>
</div>
</body>
</html>
body{
text-align: center;
font-family: helvetica;
}
div {
margin: 1px;
}
#main {
}
#input {
width: 10%;
padding: 1px;
margin: auto;
}
.global{
width: 18%;
float: left;
border: 1px solid #a1a1a1;
border-radius: 5px;
}
.small{
border: 1px solid #AA0000;
border-radius: 0px;
margin: 2px;
display: list-item;
}
#header {
text-align:left;
clear: both;
font-size: 22px;
}
ul
{
list-style-type: none;
}
.izq { float: left; }
.der { float: right; }
This issue has nothing to do with the the bullets or display:list-item and the "messed up" layout is caused the the #small11 element collapsing as it only contains floated elements.
All that is required is a "clearfix" of which there are several.
body {
text-align: center;
font-family: helvetica;
}
div {
margin: 1px;
}
#main {} #input {
width: 10%;
padding: 1px;
margin: auto;
}
.global {
width: 50%;
/* for this demo */
float: left;
border: 1px solid #a1a1a1;
border-radius: 5px;
}
.small {
border: 1px solid #AA0000;
border-radius: 0px;
margin: 2px;
display: list-item;
list-style-type: none;
overflow: hidden;
/* cleafix */
}
#header {
text-align: left;
clear: both;
font-size: 22px;
}
.izq {
float: left;
}
.der {
float: right;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="main" class="main">
<div id="global1" class="global">
Global1
<div id="small11" class="small">
<div class="izq">asdfasdf asdfasdfasdf</div>
<div class="der">1234</div>
</div>
<div id="small12" class="small">aaaa</div>
<div id="small13" class="small">ssss</div>
<div id="small14" class="small">ddd</div>
<div id="small15" class="small">ffff</div>
</div>
</div>
this is for sure a noobish html question, because i am new at this stuff.
Anyways lets get to it:
1st, check the fiddle:
http://jsfiddle.net/d6767uur/
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="frontpage.css" rel="stylesheet">
</head>
<body>
<div class="navBar">
<div class="greyline"> </div>
<div class="menu"> smoothies </div>
<div class="greyline"> </div>
<div class="menu"> milkshakes </div>
<div class="greyline"> </div>
<div class="menu"> juicy facts </div>
<div class="greyline"> </div>
<div class="menu"> about us </div>
<div class="greyline"> </div>
<div class="stuffwithsmall"> © All rights reserved.. </div>
</div>
<div class="frontWrapper">
<h1> HELLO </h1>
<div style="margin-left: 750px; margin-top: -435px;"> <img src="frontfruit.jpg"> </div>
</div>
</body>
</html>
CSS:
#font-face { font-family: SourceSansPro-Regular; src: url('SourceSansPro-Regular.otf'); }
body {
margin: 0px;
padding: 0px;
}
.navBar {
width: 205px;
height: 667px;
background-color: #55AE3A; //hover = 398a20
}
.greyline {
width: 205px;
height: 1px;
background-color: darkgrey;
}
.menu {
font-family: 'SourceSansPro-Regular';
color: white;
font-size: 25px;
opacity: 0.64;
height: 40px;
text-decoration: none;
}
.menu:hover {
background-color: #398a20;
}
.stuffwithsmall {
color: #75715e;
font-family: helvetica;
margin-top: 320px;
}
Question: why is that header going down below the main menu, and how do i change it, so that it goes to the right of the menu?
Your navbar div goes down that far because .stuffwithsmall class is inside it and has a huge margin-top. You can fix that by moving it lower, after the closing tag of navbar div.
In css, change:
.navbar {
height: auto;
width: 100%;
}