I have made 3 div in following codes. 1st one has navigation element, 2 other has section element.
If you run the above code you will see border of nav
and both sections. My doubt is that the border of 1st section left
element should be to the right of navigation bar border. But since it
is not there(can be seen by running the code), this implies div "a"
and "b" are overlapping. Am I thinking in the right way?And if I am
right, why CSS is designed this way of overlapping div.
In fact this contradicts the reason of introducing div in CSS.
nav {
float: left;
width: 200px;
border: 1px solid black;
}
section {
border: 3px solid red;
}
<div class="a">
<nav>
<span>nav</span>
<ul>
<li><a target="_blank" href="/default.asp">Home</a>
</li>
<li><a target="_blank" href="default.asp">CSS</a>
</li>
<li><a target="_blank" href="/html/default.asp">HTML</a>
</li>
<li><a target="_blank" href="/js/default.asp">JavaScript</a>
</li>
</ul>
</nav>
</div>
<div class="b">
<section>
<span>section</span>
<p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>
</section>
</div>
<div class="c">
<section>
<span>section</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce
luctus vestibulum augue ut aliquet.</p>
</section>
</div>
Its not actually overlapping. As your red border is 3px wide it seems so. See what happens when I made it 1px.
EDIT
I cleared the float on nav by:
<div style="clear:both"></div>
and now it doesn't overlap. This is expected behaviour while you float elements.
<!DOCTYPE html>
<html>
<head>
<style>
nav {
float: left;
width: 200px;
border:1px solid black;
}
section {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="a">
<nav>
<span>nav</span>
<ul>
<li><a target="_blank" href="/default.asp">Home</a></li>
<li><a target="_blank" href="default.asp">CSS</a></li>
<li><a target="_blank" href="/html/default.asp">HTML</a></li>
<li><a target="_blank" href="/js/default.asp">JavaScript</a></li>
</ul>
</nav>
<div style="clear:both"></div>
</div>
<div class="b">
<section>
<span>section</span>
<p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>
</section>
</div>
Your .a block has no height. Add a clearfix to it
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="a clearfix">
//rest of code
The porblem is with float
If you dont want to overlap them. Try flex-box
Here is a demo
nav {
/* float: left; */
height: 100%;
width: 200px;
border:1px solid black;
}
.container{
display: flex;
height: 100%;
}
section {
border: 3px solid red;
}
nav ul{
margin:0;
}
<div class="container">
<div class="a">
<nav>
<span>nav</span>
<ul>
<li><a target="_blank" href="/default.asp">Home</a></li>
<li><a target="_blank" href="default.asp">CSS</a></li>
<li><a target="_blank" href="/html/default.asp">HTML</a></li>
<li><a target="_blank" href="/js/default.asp">JavaScript</a></li>
</ul>
</nav>
</div>
<div class="b">
<section>
<span>section</span>
<p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>
</section>
</div>
</div>
<div class= "c">
<section>
<span>section</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p>
</section>
</div>
When the div element is set to float and the width is set, the div height will ajust to the content inside the div. And that is why it overflows the next div bellow. It is using div "b" to set the height of first row.
Is this what you are after:
https://jsfiddle.net/53q6e9hz/
nav {
float: left;
width: 200px;
border: 1px solid black;
}
section {
border: 3px solid red;
display:block;
}
.b{
width:calc(100% - 202px);
float: left;
}
.row1{
display:inline-block;
}
Related
I have a skip link within my page content to allow keyboard users to skip a "quick links" section, the simplified initial code looks like this:
HTML:
<body>
<div>A div with some content.</div>
<div>A div with some content.</div>
<div class="skip">
Skip quick links navigation
</div>
<div>Quick links navigation.</div>
<div id="destination">A div with some content.</div>
<div>A div with some content.</div>
<div>A div with some content.</div>
</body>
CSS:
.skip a {position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;}
.skip a:focus {position: static; width: auto; height: auto; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 4px solid #0067a5; color: #0067a5; display: block; font-size: 1.75em; line-height: 1.1; padding: 1em; text-align: center;}
The content above the .skip div is long enough that the .skip div, the quick links div, and the #destination div are all below the bottom of the viewport when the page first loads.
The behavior that I would expect, and that I am seeing on Chrome, Safari, and Edge, is that when the anchor link inside the .skip div receives focus (in this case, when a user tabs to it), the entire link is visible in the viewport. In fact, in these browsers, it seems to center the focussed element in the viewport, which is ideal.
The issue seems to be just with Firefox. The behavior I'm seeing in Firefox is that when the anchor link inside the .skip div receives focus, the top of the .skip div is at the bottom of the viewport, i.e. just off screen. If I scroll down the page, I can see that the .skip div and the anchor link inside it are visible and the anchor link has focus.
Any suggestions on how to replicate in Firefox the behavior seen on the other browsers? Thanks!
Edit:
Here's a JSFiddle that replicates the issue:
https://jsfiddle.net/ptdwkzgr/
The unexpected behavior seems to only be happening in Firefox. I would like to know if it's possible to get Firefox to behave in the expected manner (the behavior I'm seeing in Chrome, Safari, and Edge).
If you can accommodate a little bit of JavaScript then scrollIntoView API can be used: demo on jsfiddle
document.addEventListener('DOMContentLoaded', init);
function init() {
let lnk = document.querySelector('.skip a');
lnk.addEventListener('focus', () => lnk.scrollIntoView({block: "center"}) );
}
* {
padding: 0;
margin: 0;
border: 0;
outline: 0;
}
.skip a {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip a:focus {
position: static;
width: auto;
height: auto;
background: rgb(255, 255, 255) none repeat scroll 0% 0%;
border: 4px solid #0067a5;
color: #0067a5;
display: block;
font-size: 1.75em;
line-height: 1.1;
padding: 1em;
text-align: center;
}
#quick-links-section-con {
display: block;
overflow: hidden;
width: 100%;
background-color: #7A8C99;
}
.quick-links-section {
float: left;
width: 33.33%;
}
.content {
height: 100vh;
word-spacing: 50px;
}
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In finibus ligula in congue laoreet. In mi odio, efficitur quis lectus id, euismod fermentum arcu. Proin vel ipsum quis quam tincidunt maximus. Curabitur quis convallis risus. Nunc vel eleifend
mi. Mauris facilisis ligula eget pretium mollis. Maecenas lacus mi, iaculis at efficitur vel, tempor sed neque.
</p>
</div>
<div class="skip">
Skip quick links navigation
</div>
<div id="quick-links-section-con">
<div class="quick-links-section">
<p>Lorem</p>
<ul>
<a href="#">
<li>Ipsum</li>
</a>
<a href="#">
<li>Dolor</li>
</a>
<a href="#">
<li>Sit</li>
</a>
<a href="#">
<li>Amet</li>
</a>
<a href="#">
<li>Consectetur</li>
</a>
<a href="#">
<li>Adipiscing</li>
</a>
</ul>
</div>
<div class="quick-links-section">
<p>Elit</p>
<ul>
<a href="#">
<li>Ipsum</li>
</a>
<a href="#">
<li>Dolor</li>
</a>
<a href="#">
<li>Sit</li>
</a>
<a href="#">
<li>Amet</li>
</a>
<a href="#">
<li>Consectetur</li>
</a>
<a href="#">
<li>Adipiscing</li>
</a>
</ul>
</div>
<div class="quick-links-section">
<p>Finibus</p>
<ul>
<a href="#">
<li>Ipsum</li>
</a>
<a href="#">
<li>Dolor</li>
</a>
<a href="#">
<li>Sit</li>
</a>
<a href="#">
<li>Amet</li>
</a>
<a href="#">
<li>Consectetur</li>
</a>
<a href="#">
<li>Adipiscing</li>
</a>
</ul>
</div>
</div>
<div id="destination" class='content'>
<p>
Morbi consectetur massa quis metus tempor accumsan. Phasellus gravida, ante at sodales molestie, dolor sem auctor nisi, in tempus sapien felis id nisi. Maecenas dapibus suscipit metus vel euismod. In sed erat sodales felis blandit varius non eget ante.
</p>
</div>
<div>A div with some content.</div>
<div>A div with some content.</div>
I want to do following:
A div containing an image 50x50 and text next to it of font 25px.
Image and text should align in middle.
The div containing image and text should align to center of it parent.
I tried the followint but it does not give the desired result.
What needs to be done?
http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float
<html>
<head>
<style>
img {
float: center;
}
</style>
</head>
<body>
<p align="center"><img src="w3css.gif" alt="W3Schools.com" width="50" height="50">
Lorem .</p>
</body>
</html>
Try this:
<p align="center"><img src="http://www.ifn-modern.com/skin/frontend/fortis/default/images/phone.png" alt="" width="50" height="50">
Lorem .</p>
p img{
display:inline-block;
vertical-align:middle;
margin-right:5px;
}
Here is jsfiddle link: https://jsfiddle.net/x376p83x/
You can do this with flexbox:
.parent {
height: 300px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: lightgrey;
}
p {
font-size: 25px;
}
<div class="parent">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.</p>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS1EcWaTLIwhn69VJFubIdi4cpn2MYbkYN8hvMk00abhBHoO5fTnjdTgLY" alt="W3Schools.com" width="50" height="50">
</div>
please check this plunker
https://plnkr.co/edit/wlIixTpqm2dUJnalb9b6?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Centered Div</h1>
<div class="parent-div">
<div class="child-div">
<span class="my-text">Iam Centered centerd text very long Iam Centered centerd text very long</span>
<img src="test.svg" style="width:50px; height:50px;"/>
</div>
</div>
</body>
</html>
and CSS
/* Styles go here */
.parent-div{
background:green;
padding:10px;
}
.child-div{
display:table;
margin:0 auto;
text-align:center;
color:white;
}
.my-text{
max-width:200px;
display:inline-block;
}
Generally speaking, you would use text-align: center on the parent container.
http://www.w3schools.com/cssref/pr_text_text-align.asp
You can also achieve this using margins, i.e. margin: 0 auto
where '0' is your vertical margins, and 'auto' calculates the horizontal margins automatically - thus positioning your element in the centre.
For your use case, I'd suggest text-align.
try this
html
<p class="cetner"><img src="http://www.planwallpaper.com/static/images/butterfly-hq-wallpaper_09354994_256.jpg" alt="image" width="50" height="50">
Lorem .</p>
css
p.cetner {
width: 100px;
height: 50px;
text-align: center;
}
img {
display:inline-block;
vertical-align:middle;
}
I've been going through lot of articles about placing a label/legend/text on the border of a div. I've a lot of div where I want to show the different labels exactly like the image shown below:
As I can see in the w3school they say to have a field set and get declare legend to display the texts, but its not working out for me. I have a set of jquery codes which appends the html with the labels :
$('.menu').hover(function () {
$(this).css('border', 'solid 2px #8080ff');
$(this).find('.divlabel').show();
}, function () {
$(this).css('border', 'none');
$(this).find('.divlabel').hide();
});
.divlabel {
float: left;
top: 5px;
right: 10px;
padding: 0px;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<div class="divlabel">Menu</div>
<ul class="mainmenu">
<li>...</li>
<li>...</li>
</ul>
</div>
<div>
Its not working as desired, please help out guys with this css.
You can use HTML5 data-* attribute to achieve this. It will save one div element:
body {
font: 14px/20px Arial, sans-serif;
}
.menu {
position: relative;
border: 3px solid #8fdaf9;
padding: 30px 10px;
}
.menu:before {
content: attr(data-title);
background: #8fdaf9;
position: absolute;
padding: 0 20px;
color: #fff;
left: 0;
top: 0;
}
.menu ul {
margin: 0;
}
<div class="menu" data-title="Menu">
<ul class="mainmenu">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
</div>
<div>
Below example can help you get started. A CSS only solution
div.wrapper {
position: relative;
border: 2px solid cornflowerblue;
margin-top: 20px;
padding: 20px 10px 10px;
}
div.wrapper label {
color: white;
line-height: 20px;
padding: 0 5px;
position: absolute;
background-color: cornflowerblue;
/* Adjust these values to posiytion the title or label */
top: -10px;
left: 10px;
}
<div class="wrapper">
<label>Menu 1</label>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna
</div>
</div>
<div class="wrapper">
<label>Menu 2</label>
<div>
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
</div>
</div>
<div class="wrapper">
<label>Menu 3</label>
<div></div>
</div>
<div class="wrapper">
<label>Menu 4</label>
<div></div>
</div>
<div class="wrapper">
<label>Menu 5</label>
<div></div>
</div>
<div class="wrapper">
<label>Menu 6</label>
<div>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</div>
</div>
I currently have a site I'm working on ( copying another site as Practice )
This is the site I am trying to re-create
http://www.north2.net/
.
I am almost done, however I cannot position the two side sections(left and right of main image) correctly.
Can anyone help me out?
I have 3 "sections" left, middle, right, all are in a wrapper
I've tried
margin-top,
removing inline-block on the wrappers
...
MY GOAL :
Is to be able to raise the two side bars to my liking, but I don't see how to raise them in any way.
north2.net to see what I mean.
JSFIDDLE
http://jsfiddle.net/abXk4/
Not Important ::
Also, when I position anything, my background image moves and there is a white gap on the bottom of the page, my screen is 1920 x 1080, so any adjustment makes a white space,
I've been fixing this with
padding-bottom: X%;
Is this just something I have to do? Or is it because I coded incorrectly.
HTML
<title> ENTER TITLE </title>
</head>
<body>
<div id='page'>
<!--All of Left Side Bar Contents -->
<div class="swrap">
<div id="logo">
<img src="img/logo_green.png">
</div>
<div id="about">
<aside class="tlb"><p>About Us</p></aside>
<p>Welcome. We are Author, nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat.</p>
</div>
<div id="services">
<aside class="tlb"><p>Services</p></aside>
<ul>
<li>Web Site Dev and Applications </li>
<div class='hr'></div>
<li>CMS</li>
<div class='hr'></div>
<li>Digital Branding and Industry</li>
<div class='hr'></div>
<li>UI Design</li>
<div class='hr'></div>
<li>Social Media</li>
<div class='hr'></div>
<li>User Experience</li>
<div class='hr'></div>
<li>Creative Ingenuity</li>
</ul> </div>
</div>
<!-- Center Content ( main header, main image ) -->
<div class="mwrap">
<!-- Main Nav Above Slider -->
<nav class='mnav'>
<ul>
<li class="m1"><a href='#'>home</a></li>
<li class="m2"><a href='#'>Author</a></li>
<li class="m3"><a href='#'>work</a></li>
<li class="m4"><a href='#'>clients</a></li>
<li class="m5"><a href='#'>contact</a></li>
</ul>
</nav>
<div id="fimg">
<img src="img/fumic_naslovna.jpg">
</div>
<div id="featart">
<article>
<h1>Lorem Ipsum</h1>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus. Aenean dignissim. Curabitur facilisis sem at nisi laoreet placerat. Duis sed ipsum ac nibh mattis feugiat. Proin sed purus. Vivamus lectus ipsum, rhoncus sed, scelerisque sit amet, ultrices in, dolor. Aliquam vel magna non nunc ornare bibendum. Sed libero. Maecenas at est. Vivamus ornare, felis et luctus dapibus, lacus leo convallis diam, eget dapibus augue arcu eget arcu.</p>
</article>
</div>
</div>
<div id="rwrap">
<div class="rfc">
<aside class="tlb">Featured Clients</aside>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus.</p>
<div class='hr'></div>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
CSS
body {
background-image: url(img/brown.jpg);
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
padding-bottom:12%;
color: #fff;
font-weight: bold;
font-size: large;
text-align: left;
}
* {
border-radius: 1px;
}
#page {
margin: 30px 25%;
width: auto;
/* width should be 50% ... 25% on each side, 50% in middle, centered!*/
border: 2px solid black;
}
/*Left Content Begins ------------------ */
.swrap {
width: 23%;
display:inline-block;
/*1% margin on each side */
margin-top: 100px;
}
#logo {
background-color: rgba(0,0,0,.7);
}
#about {
margin: 3px 0;
background-color: rgba(89, 194, 141, 1);
padding: 5%;
}
#about aside {
margin-left: -6% !important;
}
#services {
background-color:rgba(66, 161, 75, .96);
padding: 2%;
margin: 3px 0;
}
.tlb {
background-color: rgba(0,0,0,.6);
width: 75%;
margin: -10px 0 0 -2% !important;
padding-left: 4%;
}
/*Middle Content Begins ------------------ */
.mwrap {
width: 48%;
margin: 0 auto;
/*1% margin on each side for .mwrap*/
display:inline-block;
}
.mnav ul {
list-style:none;
}
.mnav ul li {
display: inline;
font-size: large;
font-weight:bold;
padding: 2px 2%;
border-radius: 1px;
}
.mnav ul li a {
text-decoration: none;
color: #fff;
}
.m1 {background-color:rgba(46, 206, 87, 1); }
.m2 {background-color: rgba(39, 197, 80, 1); }
.m3 {background-color: rgba(70, 182, 99, 1); }
.m4 {background-color: rgba(64, 164, 90, 1);}
.m5 {background-color: rgba(63, 140, 83, 1); }
.mnav ul li:active {
background-color:none !important;
}
.mnav li:hover {
background-color: rgba(0,0,0,.3);
}
#fimg {
width: 100%;
}
#fimg img {
width: 100%;
}
#featart {
margin-top: -10px;
background-color: rgba(64, 164, 90, .9);
padding: 1% 1%;
}
/*Right Content Begins ------------------ */
#rwrap {
width: 23%;
display:inline-block;
/*1% margin on each side */
}
.rfc {
background-color:rgba(66, 161, 75, .96);
padding: 2%;
}
.rfc .tlb {
margin-top: 9px !important;
margin-left: -2.3% !important;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
The easy way is to use position relative position: relative; bottom: [how ever many pixels]
A better (and later much more flexible) way is to change you HTML structure a little bit.
If I were building this site I'd break it into two wrapping divs with three column divs under each of them like here:
<div class="header">
<div class="left-column">
<img id="logo" src="img/logo.png" />
</div>
<div class="middle-column">
<ul class="nav"></ul>
</div>
<div class="right-column">
Put content here if you want it
</div>
</div>
<div class="content">
<div class="left-column">
Content in left column
</div>
<div class="middle-column">
Content in middle
</div>
<div class="right-column">
Content on right
</div>
</div>
Now, use CSS to float those columns just like you did before. The difference with this is you can define a height for the header and the logo and navigation will be much easier to align as they are separate from the other columns.
If you want to get more technical check out CSS Flexbox, it would work well here.
http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
set
a position: relative;
bottom: X px;
In my fiddle you will see a break in text, I would like to put a <hr> there and decorate it in the CSS, but I have no idea how to do this as when I do this it breaks my inline-block, and I'm thinking that's because the <hr> is a block element. Is there any creative solutions around this? I need it to be fixed there between the two paragraphs of text to maintain responsiveness.
Thanks!
FIDDLE
HTML:
<section>
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum, nisl id ultricies sollicitudin, neque sapien porta nisl, ut gravida elit quam id nisi. <br /><br />Nunc viverra laoreet porttitor. Duis augue justo, pellentesque a luctus eget, luctus a quam. Fusce nec neque nec dolor mattis tempor id vitae nisi.</p>
<img class="ipad" src="http://img1.lesnumeriques.com/news/26/26963/ipad-4-os.jpg">
</div>
</section>
CSS:
.first {
height: 100%;
line-height: 0;
}
.first p {
vertical-align: middle;
display: inline-block;
width: 49%;
}
.ipad {
vertical-align: middle;
display: inline-block;
width: 49.2%;
}
p {
margin: 0;
padding: 1em 0;
font-size: 1.8em;
line-height: 1.5;
}
You could achieve this by wrapping your <p> and <hr> elements into another <div> element, and making it display:inline-block. My solution involved adding this wrapper so your structure ended up being:
<section>
<div class="first">
<div class="text-wrap">
<p></p>
<hr />
<p></p>
</div>
<img class="ipad" src="http://img1.lesnumeriques.com/news/26/26963/ipad-4-os.jpg" />
</div>
</section>
(Additional element is .text-wrap. Note that I split up the two paragraphs into individual <p> elements.) The CSS I left mostly alone, except I removed the definition for .first p, and added these two:
.text-wrap{
vertical-align: middle;
display:inline-block;
width:49%;
}
.text-wrap p {
vertical-align: middle;
display: inline-block;
}
Here's a JSFiddle example that shows what this achieves. If this isn't what you were looking for, or you wanted to use a different method, let me know and I'll be happy to help further!
Here's an alternative to Serlite's answer. It basically puts the <hr> in implicitly, using CSS.
fiddle
We add a border to the top of each paragraph, except the first one in each container.
p {
...
border-top: 1px solid black;
}
p:nth-child(1) {
border-top: none;
}