I'm really struggling here trying to figure out what is going on. I have an HTML with a header, a sidebar, and a central content page.
The sidebar and central content are in the same div, which also acts as their clearfix. I floated the sidebar to the left and the content to the right, but instead of aligning themselves to each other neatly, the content div falls down.
HTML
<body>
<header>
<img src="./img/Logo_Color.png" alt="Logo">
<h1>Batch Documentation</h1>
</header>
<div class="clearfix">
<div class="sidebar">
<nav>
<ul>
<li>Overview</li>
<li>Fl Overview</li>
<li>PF2 Overview</li>
<li>Inputs</li>
<li>Outputs</li>
<li>Appendix A</li>
<li>Appendix B</li>
</ul>
</nav>
</div>
<main>
<div class="centerContent">
<h2>Overview</h2>
<p>
Integer in qui primam te ipsa-plenus Crescere Effectum Septembrem. Me quo 700% octavas ad imperium caduca si eros eius orci arcu te mirum consumere, meritos modo diam eros ti, in cras diuturna interpres, semente, securitas sem odio dignitatis reuiescat.
Lius quam charybdium nonullis sem inibunt illum, civibus eius arendom, Indolem te e licentiose te maiestatem molestias typi combinatur sagittis successus nomine, reniam eos te-feroces assueverunt.
Saepe non, Fervore 2000 galliae nibh eu ea ut:
</p>
<code>Hello</code>
</div>
</main>
</div>
</body>
CSS
* {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style-type: none;
}
body {
margin: auto;
width: 1265px;
background-color: #eae0ff;
}
main {
display: inline-block
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
header {
margin: 15px 10px 20px 10px;
}
.sidebar {
width: 25%;
margin: 5px 0px 10px 10px;
padding-right: 20px;
float: left;
background-color: #ccccff;
}
.centerContent {
width: 75%;
margin: auto;
padding-left: 20px;
border: 3px solid #73ad21;
float: right;
}
li {
margin-top: 5px;
margin-bottom: 5px;
}
code {
width: 90%;
font-family: 'Source Code Pro', monospace;
color: #43892a;
background-color: #000;
display: block;
}
I am especially concerned because the box sizing is set to border box, and the display is inline block. The sidebar has 25% width whereas the main content has 75%, yet it seems that the margins and padding are being added to their dimensions rather than being included in the % calculation.
I Dont know why you using floats now, i attached a same with small flexbox layout. hope it helps.
* {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style-type: none;
}
body {
margin: auto;
background-color: #eae0ff;
}
main {
display: inline-block
}
.clearfix{
display:flex;
}
header {
margin: 15px 10px 20px 10px;
}
.sidebar {
width: 25%;
margin: 0px 0px 10px 10px;
padding-right: 20px;
background-color: #ccccff;
flex: 0 0 auto;
}
.centerContent {
width: 75%;
margin: auto;
padding-left: 20px;
border: 3px solid #73ad21;
}
li {
margin-top: 5px;
margin-bottom: 5px;
}
code {
width: 90%;
font-family: 'Source Code Pro', monospace;
color: #43892a;
background-color: #000;
display: block;
}
<body>
<header>
<img src="./img/Logo_Color.png" alt="Logo">
<h1>Batch Documentation</h1>
</header>
<div class="clearfix">
<div class="sidebar">
<nav>
<ul>
<li>Overview</li>
<li>Fl Overview</li>
<li>PF2 Overview</li>
<li>Inputs</li>
<li>Outputs</li>
<li>Appendix A</li>
<li>Appendix B</li>
</ul>
</nav>
</div>
<main>
<div class="centerContent">
<h2>Overview</h2>
<p>
Integer in qui primam te ipsa-plenus Crescere Effectum Septembrem. Me quo 700% octavas ad imperium caduca si eros eius orci arcu te mirum consumere, meritos modo diam eros ti, in cras diuturna interpres, semente, securitas sem odio dignitatis reuiescat.
Lius quam charybdium nonullis sem inibunt illum, civibus eius arendom, Indolem te e licentiose te maiestatem molestias typi combinatur sagittis successus nomine, reniam eos te-feroces assueverunt. Saepe non, Fervore 2000 galliae nibh eu ea ut:
</p>
<code>Hello</code>
</div>
</main>
</div>
</body>
Better to use flex layout, it is going to be responsive and never creates problems.
CSS:
* {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style-type: none;
}
body {
margin: auto;
width: 96vw;
background-color: #eae0ff;
}
main {
width: 70%;
margin: auto;
}
.clearfix {
display: flex;
justify-content: space-between;
flex-direction: row;
margin: 0 20px;
}
header {
margin: 15px 10px 20px 10px;
}
.sidebar {
width: 25%;
background-color: #ccccff;
}
.centerContent {
border: 3px solid #73ad21;
}
li {
margin-top: 5px;
margin-bottom: 5px;
}
code {
font-family: 'Source Code Pro', monospace;
color: #43892a;
background-color: #000;
display: block;
}
I think you have just started learning HTML , CSS.
So whenever you give margins and padding (especially left and right) count each pixels else you'll face such problems like you are facing now.
In future you will learn grid and flexbox in css.
When you use both (grid & flexbox) then I bet you will never use float property.
As you are beginner, you can easily understand my solution -
So in your css you have to remove -
main{
display:inline-block;
}
and add this -
.centerContent {
display: inline-block;
width: 70%; // play by changing the width.
margin: auto;
padding-left: 20px;
border: 3px solid #73ad21;
float: right; // float : left; will also work
}
The margin are not included in the width for the box-sizing: border-box butpaddings and borders are included.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
So the margin remains external to side bar and the second content is moving down. You can remove margin to move the content back.
Related
I have put the image inside of the paragraph tag itself and floated it right, however it moves it to the right but underlaps the container edge.
I have taken it out of the paragraph section as well and it still does the same. I have created containers as well for them. I want the image in the container with the paragraph. I have attached an image of the issue I am having as well as my css.
body {
background-image: url(../images/keyboard.jpeg);
background-repeat: no-repeat;
background-size: cover;
font-family: cursive;
}
/* GOOGLE FONTS*/
#import url('https://fonts.googleapis.com/css2?family=Cookie&family=Fuzzy+Bubbles&family=Jost:wght#700&display=swap');
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Cookie';
font-weight: 700;
}
/*ID Classes*/
#mainTitle {
color: #FFF;
font-size: 5em;
text-align: center;
text-shadow: 5px 5px 10px #17e85f;
text-decoration: underline solid;
font-family: fantasy;
}
#container {
border: 10px solid #FFF;
margin: auto;
margin-top: 10px;
padding: auto;
width: 50%;
}
#footer {
color: #FFF;
text-align: center;
border: 2px;
border-style: solid;
}
/* REUSABLE CLASSES*/
.navbar {
background-color: #0a861d;
border-radius: 30px;
text-align: center;
}
.navbar li {
display: inline-block;
list-style: none;
margin: 13px 20px;
text-align: center;
}
.navbar ul {
overflow: auto;
}
.navbar li a {
padding: 3px 3px;
text-decoration: none;
color: white;
}
.search {
float: right;
color: white;
padding: 12px 75px;
}
.navbar input {
border: 2px solid black;
border-radius: 14px;
padding: 3px 17px;
width: 129px;
}
/*SERVICES PAGE LIST*/
.servicelist ul {
line-height: 1.5em;
margin: 5px 0 15px;
padding: 0;
}
.servicelist li {
font-size: 50px;
font-weight: 500;
background-image: linear-gradient(to left, rgba(60, 154, 118, 0.91), #15c723);
color: transparent;
text-align: center;
background-clip: text;
-webkit-background-clip: text;
}
.center {
text-align: center;
}
.margin {
margin-top: 10px;
}
.scontainer {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box {
float: left;
width: 50%;
color: #ccc;
text-align: center;
height: 50%;
font-size: 50vmin;
font-family: helvetica;
}
/* SINGLE CLASSES*/
a:hover {
box-shadow: inset 100px 0 0 0 #54b3d6;
color: white;
}
h2 {
color: #FFF;
font-size: 2em;
text-align: center;
text-shadow: 5px 5px 10px #17e85f;
text-decoration: underline solid;
font-family: fantasy;
}
p {
color: #b8dae2;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.3em;
line-height: 24px;
margin: 10px 10px 24px;
padding: 30px;
text-align: justify;
border: 3px solid #FFF;
}
.service_styling {
color: #b8dae2;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.3em;
line-height: 24px;
margin: 10px 10px 24px;
padding: 30px;
text-align: justify;
border: 3px solid #FFF;
}
.imgcontainer {
width: auto;
height: auto;
border: 2px solid red;
float: inline-end;
}
.realImgContainer {
width: auto;
height: auto;
border: 2px solid red;
float: right;
}
img {
/* max-width: 50%; */
/* max-height: 50%; */
/* border: 5px solid #FFF; */
/* margin: auto; */
/* margin-top: 10px; */
/* padding: auto; */
/* width: 50%; */
}
/*
.imgHardware{
float: right;
}
.imgSoftware{
float: right;
}
.imgApp{
float: right;
}
.imgCabling{
float: right;
}
*/
<!-- NAV BAR-->
<nav class="navbar">
<ul>
<li>Home</li>
<li>Services</li>
<li>Locations</li>
<div class="search">
<input type="text" name="search" id="search" placeholder="Search this website">
</div>
</ul>
</nav>
<h1 id="mainTitle"> Services</h1>
<!-- MAIN SECTION-->
<section id="container">
<h2> Things We Do </h2>
<div class="servicelist margin">
<h2>Hardware</h2>
<div class="service_styling">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<div><img class="realImgContainer" src="images/cpusocket.jpeg" alt="computer socket"></div>
</span>
</div>
<div style="clear:both"></div>
<h2>Software</h2>
<p> We provide the latest software for all kinds of fields. We work directly with vendors to get the best rate - we provide competitive rates and offer affordable and simple subscription solutions - we also carry full version software that is subscription-free.
<img class="imgSoftware" src="images/code.jpeg" alt="computer code"></p>
<h2>Application development</h2>
<p> We can create and deploy custom software for whatever task you need completed. Our seasoned developers specialize in C, C++ and Java. Allowing us to create versailte and flexible software. Our team will with work with you hand in hand to ensure you
get exactly what you need. We will also provide 24/7 maintenance as well as upgrades on all of our in house software.
<img class="imgApp" src="images/codedeveloper.jpeg" alt="someone coding"></p>
<h2>Enterprise cabling</h2>
<p> We have over 30 years of infrastructure cabling experience. We have in house techncians who can terminate and pull ethernet and fiber optic cabling. We use our own equipment and do all of our work in house - without the use of a third party. So we
can give you a fair price as well as a clean and concise debriefing of the exact work we will be doing and its core benefits.
<img class="imgCabling" src="images/switchandcable.jpeg" alt="switch and cable">
</p>
</ul>
</section>
<!-- SUB SECTION-->
<section>
</section>
<!-- FOOTER-->
<div id="footer">© 2050</div>
I recently started developing my own website and I require some help from people who are more advanced in CSS and HTML. I am struggling with navbar alignment. I want my middle part as in "beginning" "about me" and "statistics" to be exactly in the middle. "Objectives" and "contact" to the right, logo to the left. Main problem is that I can't figure out how to perfectly align everything so the distance between left and right remains the same, as well as the middle part of the navbar. And yes, I am trying to make the website responsive so it looks good on every device. My end goal is to make an awesome portfolio site that also showcases my skill a little. I also haven't used bootstrap but I included it in my code. Sorry for a long text, I am very new to this so it's hard for me to describe the problem. My code is also very messy so if anyone has time to correct/give feedback, I would really really appreciate that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/158ff5ced2.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>Live like legends</title>
<link rel="stylesheet" href="./css/style.css">
<script src="javakood.js"></script>
</head>
<body>
<nav class="navbar">
<!-- <input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars"></i>
</label>
-->
<div class="logo">
<img src="./veebipilt.png" width="128" height="56">
</div>
<ul class="menu">
<li>Beginning</li>
<li>About me</li>
<li>Statistics</li>
</ul>
<ul class="menu2">
<li>Objectives</li>
<li><a class="special" href="#">Contact</a></li>
</ul>
</nav>
<! Esimene vahemik veebilehes kus on tekst ja pilt korvuti---->
<section class="home">
<div class="rida">
<div class="tekstall">
<h1>Tere tulemast minu lehele!</h1>
<p>siia tuleb veel midagi lahedat veel ei tea</p>
</div>
<div class="piltnext">
<img src="./12345.jpg" width="500" height="300">
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<section class="about">
<div class="tekstabout">
<h1><mark>Veidi</mark> minust</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar{
background: #cbcca3;
position: fixed;
width: 100%;
padding: 15px 0;
display: flex;
}
.home{
background: url("./sigma.gif") no-repeat center;
background-size: cover;
height: 100vh;
}
.logo {
float: left;
line-height: 70px;
margin-left: 30px;
margin-right: 20px;
}
.menu{
text-align: center;
padding: 0;
margin: 0;
justify-content: space-between;
}
.menu2{
padding: 0;
margin: 0px 30px 0px 0px;
list-style-type: none;
text-align: center;
}
.navbar .menu li{
display: inline-block;
list-style-type: none;
margin: 0px 20px 0px 20px;
}
.navbar .menu li a{
font-size: 17px;
line-height: 70px;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
border-radius: 3px;
}
.navbar .menu2 li{
display: inline-block;
margin: 0px 20px 0px 20px;
}
.navbar .menu2 li a{
font-size: 17px;
text-transform: uppercase;
line-height: 70px;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
border-radius: 3px;
}
a.special,a:hover{
background-color: paleturquoise;
transition: .5s;
}
p{
color: floralwhite;
}
.rida{
display: flex;
align-items: center;
justify-content: space-between;
}
.tekstall{
flex-basis: auto;
min-width: 300px;
margin-left: 20px;
padding-left: 30px;
}
.piltnext{
max-width: 100%;
padding: 20px;
height: auto;
margin-top: 0px;
}
Currently I'm working in laptop so my screen isn't big. But, I made some adjustments to your code and I think it's what you want.
You just need to define the width values for everything and make sure it all works in mobile to.
Regards
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
background: #cbcca3;
position: fixed;
width: 100%;
padding: 15px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.home {
background: url("./sigma.gif") no-repeat center;
background-size: cover;
height: 100vh;
}
.logo {
line-height: 70px;
margin-left: 30px;
margin-right: 20px;
max-width: 20px;
}
.menu {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 20px;
}
.menu a {
margin: 0 5px;
font-size: 17px;
line-height: 70px;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
border-radius: 3px;
}
.menu2{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 20px;
}
.menu2 a {
margin: 0 5px;
font-size: 17px;
text-transform: uppercase;
line-height: 70px;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
}
a.special,a:hover{
background-color: paleturquoise;
transition: .5s;
}
p{
color: floralwhite;
}
.rida{
display: flex;
align-items: center;
justify-content: space-between;
}
<nav class="navbar">
<div class="logo">
<img src="./veebipilt.png" width="128" height="56">
</div>
<div class="menu">
<div>Beginning</div>
<div>About me</div>
<div>Statistics</div>
</div>
<div class="menu2">
<div>Objectives</div>
<div><a class="special" href="#">Contact</a></div>
</div>
</nav>
Welcome to stackoverflow. Your css needs some tweaking. try this (note vertical-align and line-height):
.navbar .menu li a{
font-size: 17px;
line-height: 56px;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
border-radius: 3px;
vertical-align: middle;
}
I am not entirely clear what you asking for but to create a truly centered Navbar, with variable-length left and right-aligned items, CSS Flexbox can be used. My Codepen implementation (of the original idea from Keep the middle item centered when side items have different widths) could be modified for a Navbar: https://codepen.io/sam-miller-the-flexboxer/pen/OJQoGGq?editors=1100
The centerline class and div add a central divider to check the alignment of the center div in this example.
CSS:
.centerline {
position: fixed;
top: 0;
left: 50%;
width: 10px;
height: 100%;
background: black;
transform: translateX(-50%);
opacity: 0.5;
z-index: 1
}
.parent {
display: flex;
}
.left,
.right {
background-color: red;
flex: 1 1 0%;
overflow: auto;
}
.right {
text-align: right;
}
.center {
background-color: green;
}
Html:
<div class="centerline"></div>
<div class="parent">
<div class="left">
short text.
</div>
<div class="center">
I'm in the center.
</div>
<div class="right">
Very loooooooong text.
</div>
</div>
For more ideas regarding Bootstrap see:
https://github.com/twbs/bootstrap/discussions/36486
https://github.com/twbs/bootstrap/pull/36523/commits/fca49e8ee6b4d768d0ec144fb3b73ac2c5ff3cc0
Bootstrap Navbar 4 code examples (some of the classes would have to be updated for Boostrap 5):
https://codepen.io/yesiamrocks/pen/MVOWXZ
I have three ul's added to a footer within bootstrap columns inside a parent row element, and I've used vertical-align:top for a similar footer before, but can't use this here to align each ul to the top of the parent div. (It's added to footer > row > .col > ul)
Any ideas?
Codepen: https://codepen.io/nickwcook/pen/aJPGeJ.
HTML:
<footer>
<row>
<div class="col col-sm-3">
<ul>
<li>Quick Menu</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="col col-sm-3">
<ul>
<li>Recent Posts</li>
<li>Post One</li>
<li>Post Two</li>
<li>Post Three</li>
</ul>
</div>
<div class="col col-sm-3">
<ul>
<li>About</li>
<li><a>Lorem ipsum dolor sit amet, vel decore vidisse an, id simul quaerendum usu. Et vis nemore mandamus. Ei pri dicit erroribus splendide. Alterum perfecto reprimique et nec, diam dolorum posidonium qui ei.</a></li>
</ul>
</div>
</row>
<row>
<p>Developed by My Name</p>
</row>
</footer>
CSS
footer {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background: #212121;
margin: 0;
z-index: 99;
}
footer>row {
display: flex;
align-items: center;
padding: 30px 5%;
}
footer>row:first-of-type {
justify-content: space-between;
}
footer>row>.col {
text-align: left;
}
footer>row>.col>ul>li:first-of-type {
color: #fff;
font-weight: 600;
font-size: 12px;
}
footer>row>.col>ul {
vertical-align: top;
padding: 0;
}
footer>row>.col>ul {
list-style-type: none;
padding: 0;
margin: 0;
}
footer>row>.col ul>li {
margin: 15px 0;
}
footer>row>.col ul>li>a {
font-family: 'Open Sans', sans-serif;
font-size: 11px;
color: #a5a5a5;
}
footer>row>.col ul>li>a:hover {
text-decoration: none;
color: #fff;
}
footer>row:last-of-type {
background: #1f1f1f;
display: flex;
justify-content: center;
}
footer>row:last-of-type>p,
footer>row:last-of-type>p>a {
font-family: 'Open Sans', sans-serif;
}
footer>row:last-of-type>p {
font-family: 'Open Sans', sans-serif;
padding: 0;
margin: 0;
color: #747475;
font-size: 11px;
}
footer>row:last-of-type>p>a {
color: #a5a5a5;
text-decoration: none;
}
footer>row:last-of-type>p>a:hover {
color: #fff;
text-decoration: none;
}
Since you're overriding the normal Bootstap row with flexbox, use the appropriate flexbox alignment..
footer > row
{
display: flex;
align-items: flex-start;
padding: 30px 5%;
}
https://codepen.io/anon/pen/peqKbj
I'm making a page layout and I can't apply styles only to the footer for some reason, I've reviewed the code and did find anything wrong (But i'm sure there bc its not working -_-) I've tried rewriting the code and still not working.
//*GENERAL*//
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
border: 1px solid black;
}
.logo img {
width: 100px;
margin: 50px auto 10px;
display: block;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: black;
}
//*NAVIGATION*//
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
padding: 10px;
text-align: center;
margin: 5px;
}
nav ul li a {
color: black;
}
//*HERO*//
.wrap {
height: 400px;
padding: 1px
}
.head-content {
height: 505px;
background: url(../img/hero.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 40% 50%;
padding: 10px;
text-align: center;
}
.head-content h1, a {
color: white;
}
.head-content h1 {
margin-top: 130px;
font-size: 3em;
}
.head-content .btn {
padding: 15px 20px;
margin: 10px auto;
background: #FF0080;
border-radius: 3px;
display: inline-block;
border-radius: 5px;
}
.btn:hover {
color: #FF0080;
background: white;
font-weight: bold;
transition: .25s;
}
//*LEARN MORE*//
.wrap-services {
height: 1400px;
padding: 1px;
margin: 1px;
}
.headline {
color: rgba(0,0,0, .8);
text-align: center;
padding: 10px;
height: 100px;
margin: 70px 0 0 0;
}
.headline h2 {
font-size: 1.5em;
padding: 0;
margin: 0;
}
.headline h3 {
color: rgba(0,0,0, .4);
font-weight: lighter;
font-size: 1em;
}
.ser-1,
.ser-2,
.ser-3 {
height: 400px;
padding: 10px;
margin: 0 2.5%;
text-align: center;
/*border: 1px solid black;*/
}
.ser-1 h3,
.ser-2 h3,
.ser-3 h3 {
border-bottom: 2px solid #FF0080;
padding: 10px;
margin: 5px 5px 30px;
font-size: 1em;
}
.ser-1 p,
.ser-2 p,
.ser-3 p {
color: rgba(0,0,0, .5);
font-size: .9em;
line-height: 2em;
}
//*REVIEWS*//
.wrap-review {
height: 770px;
}
.content-review {
text-align: center;
height: 770px;
background: #FF0080;
color: white;
padding: 1px;
}
.content-review h3 {
margin-top: 80px;
font-size: 1.7em;
}
.review {
background: white;
color: #FF0080;
margin: 20px 2.5%;
border-radius: 2px;
height: 200px;
display: block;
}
.review-content {
text-align: center;
padding: 40px 20px 20px;
}
.review-name {
font-style: italic;
font-weight: bold;
}
.review-name-img {
display: none;
}
//*FORM*//
.wrap-form {
height: 770px;
padding: 1px;
}
.wrap-form-contect {
text-align: center;
height: 770px;
padding: 1px;
margin: 70px 10px 10px;
border: 5px solid black;
}
.wrap-form-contect p {
text-transform: capitalize;
line-height: 1.5em;
font-size: .95em;
}
input,
textarea {
border: none;
background: #eee;
margin: 10px;
padding: 20px;
}
textarea {
padding: 30px;
}
button {
display: block;
margin: 10px auto;
background: #FF0080;
color: white;
border: none;
padding: 20px;
width: 75%;
font: bold 1.4em/1 sans-serif;
}
button:hover {
cursor: pointer;
background: yellow;
color: black;
transition: .5s;
}
//*FOOTER*//
footer {
background: black;
height: 500px;
margin: 500px;
padding: 500px;
width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<title>FSA Doc.</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style/nor.css">
<link rel="stylesheet" type="text/css" href="style/main.css">
</head>
<body>
<header>
<div class="logo">
<img src="img/black.png" alt="FSA Doc.">
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>REVIEWS</li>
<li>CONTACT US</li>
</ul>
</nav>
</header>
<div class="head-content">
<h1>FSA Doc.</h1>
<a class="bth" href="#">CALL (866) 210-1337</a>
<a class="bth" href="#">LEARN MORE</a>
</div>
<div class="headline">
<h2>LEARN MORE</h2>
<h3>about how we help</h3>
</div>
<div class="ser-1">
<h3>SATISFACTION GUARANTEED</h3>
<p>Document Prep Express has a stellar success rate and we strive to provide services will get you the best results possible!</p>
</div>
<div class="ser-2">
<h3>NO UPFRONT FEES</h3>
<p>Period.</p>
</div>
<div class="ser-3">
<h3>WE’RE HERE TO HELP</h3>
<p>Confused? Don’t know where to turn? Our experts will answer all your questions.</p>
</div>
<div class="review">
<h3 class="head-review">what people say</h3>
<div class="review-contienr">
<p class="review">“FSA Doc. saved me from losing my car and apartment! I could not thank Document Prep Express enough.”</p>
<h3 class="reivew-name">Lindsay Anderson</h3>
</div>
<div class="review-contienr">
<p class="review">“Experts in their field! They told me everything to look out for and acted quickly”</p>
<h3 class="reivew-name">Ashley Guthrie</h3>
</div>
</div>
<div class="wrap-form">
<h3>get started</h3>
<p>let us know what can we do for you</p>
<form>
<input value="Your Name" type="text">
<input value="Email" type="text">
<textarea>Your Message</textarea>
<button type="submit">Send</button>
</form>
</div>
<footer>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</footer>
</body>
</html>
Remove the double back slashes from your css comments. Proper css comment syntax looks like this:
/* comment */
This is my first post on stack overflow, so if I do something wrong please inform me :).
This is the HTML:
<nav>
<div><img src="images/logo.png"</div>
<div>Noticias</div>
<div>Eventos</div>
<div>Alumnos</div>
<div>Contacto</div>
</nav>
<div id="content">
<h3><span class="green">Noticias |</span> Los comunicados y anuncios <span class="green">oficales</span> de la institución</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec magna pulvinar, posuere lacus nec, suscipit risus. Nunc vitae sollicitudin nisl.</p>
And the CSS:
#import url(http://fonts.googleapis.com/css?family=Comfortaa); *{border:1px dotted black;}
html {
background-color: #FFFFFF;
min-height: 2000px;
}
body {
color: #1F4F75;
font-family: Comfortaa, sans-serif;
}
nav {
height: 10%;
width:100%;
position: fixed;
box-shadow: 0px 10px 10px #888888;
background-color: #FFFFFF;
display: block;
}
nav div {
display: block;
float:right;
height: 100%;
font-size: 25px;
}
nav:first-child {
float:left;
}
#content {
width: 70%;
margin: auto;
margin-top: 7%;
}
.green {
color:#91BA30;
}
h3 {
font-size: 25px;
text-align: center;
font-weight: 700;
}
p {
line-height: 1.4;
font-size: 17px;
text-align: justify;
color: #1F4F75;
font-weight: 400;
}
This is the fiddle http://jsfiddle.net/LuTLm/ .
My nav has 5 elements: an image and four links. I'm trying to make the apear aligned on the navigation bar, with every element floating to the right, exept the first one (the image) wich floats left and should be resized to fit on the 10% nav.
This shoul be pretty basic. I'm just starting to code web. Alternatives are also welcome as long as they are a actual better solutions.
Sorry, I missed the bit about floating the img left..
clean up the html to close off the IMG tag with /> and then either add a class or inline css to float the div containing the img to the left..
<div style='float:left'><img src="images/logo.png" /></div>
or
<div class='FloatLeft'><img src="images/logo.png" /></div>
.FloatLeft
{
float: left;
}
or
change the css like this
nav div:first-child {
float:left;
}
Just update yuor css from
nav:first-child {
float:left;
}
to
nav div:first-child {
float:left; // make it float left
width: 10%; // resize it to 10% width
}
DEMO
You can also use CSS tables to do navigation bars. I've found they have a lot of nice properties, such as filling up the full width with evenly spaced navigation items, and are well supported in all modern browsers. They even work well with all sorts of semantic markup, including links of lists.
Given the HTML:
<body>
<nav>
<div>
<img src="images/logo.png">
</div>
<div>Noticias</div>
<div>Eventos</div>
<div>Alumnos</div>
<div>Contacto</div>
</nav>
<div id="content">
<h3><span class="green">Noticias |</span> Los comunicados y anuncios <span class="green">oficales</span> de la institución</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec magna pulvinar, posuere lacus nec, suscipit risus. Nunc vitae sollicitudin nisl.</p>
You would use the following CSS:
#import url(http://fonts.googleapis.com/css?family=Comfortaa);
html {
background-color: #FFFFFF;
min-height: 2000px;
}
body {
color: #1F4F75;
font-family: Comfortaa, sans-serif;
}
nav {
height: 10%;
width:100%;
position: fixed;
top: 0;
left: 0;
box-shadow: 0px 10px 10px #888888;
background-color: #FFFFFF;
display: table;
table-layout: auto;
}
nav div {
display: table-cell;
font-size: 25px;
vertical-align: middle;
}
nav div:first-child {
width: 10%;
}
#content {
width: 70%;
margin: auto;
margin-top: 7%;
}
.green {
color:#91BA30;
}
h3 {
font-size: 25px;
text-align: center;
font-weight: 700;
}
p {
line-height: 1.4;
font-size: 17px;
text-align: justify;
color: #1F4F75;
font-weight: 400;
}
DEMO