i am experimenting with html and css and trying to figure out how to make this work... I am just trying to make the #menu float to the right of the h1 but be on the same baseline so... but obviously float:right makes it float to top-right? any way to make it float to bottom-right or align with the bottom of the containing div?
here is the html:
<!doctype html>
<html>
<head>
<title>Website.com</title>
<link rel="Stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div>
<h1>Website.com</h1>
<div id="menu">
<ul>
<li>Home</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>About</li>
</ul>
</div>
</div>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis elit et augue pellentesque fermentum semper urna interdum. Nullam egestas augue ut risus molestie mollis ut sed dolor. Curabitur fermentum, lorem sed suscipit euismod, diam urna vulputate sapien, ac venenatis velit eros sed leo. Duis venenatis, metus at scelerisque fringilla, neque arcu dignissim arcu, quis sodales lorem mauris eget tellus. Phasellus fermentum est eget erat pretium mollis. Cras eu nunc dui, sed fermentum libero. Vivamus posuere pellentesque tellus in interdum. Vestibulum eleifend fringilla enim, in vehicula justo tristique a. Aenean congue vestibulum iaculis. Sed tristique interdum lectus, vel aliquam nisi fringilla ac. Mauris ligula nisl, gravida id consequat in, vestibulum at risus. Vivamus vitae massa lorem, vel molestie tellus. Nulla et magna orci. Nunc turpis ipsum, facilisis eget tristique sit amet, scelerisque quis ligula. Mauris in molestie purus. Cras eget magna vel enim imperdiet aliquam.</p>
<p>Vestibulum vel eros lacus, vel viverra magna. Duis mollis nibh ut erat accumsan ut pulvinar ipsum dapibus. Aliquam vehicula tempus fermentum. Morbi ut turpis sem, pretium sodales libero. Vestibulum dapibus, ligula in molestie scelerisque, lacus est aliquam elit, ut vulputate sapien nisl vitae elit. Cras pulvinar mi nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in est orci. Ut rutrum lobortis quam vitae commodo. Maecenas dapibus aliquam ante eget mattis. Proin justo eros, bibendum quis scelerisque eget, fermentum eu purus. Vivamus viverra ligula a dolor iaculis ullamcorper. Aliquam erat volutpat. Nunc libero nulla, sodales at dictum vel, tempus quis est.</p>
<p>Nullam pharetra tincidunt lectus ac sollicitudin. Duis in venenatis eros. Phasellus malesuada quam vel sapien ultricies tincidunt. Duis condimentum posuere semper. Vivamus eleifend libero eget ligula egestas adipiscing. Proin dapibus leo non urna pellentesque convallis. Suspendisse massa leo, semper vitae tincidunt at, mattis et sapien. Maecenas consequat hendrerit odio et feugiat. Sed dignissim massa a leo sollicitudin imperdiet consequat purus vehicula. Mauris sit amet nulla a turpis porta accumsan. Morbi interdum pellentesque massa, vel accumsan massa aliquam quis. Sed sed ligula neque. In hac habitasse platea dictumst. Curabitur vehicula scelerisque ligula non tincidunt.</p>
<hr />
<p id="footer">Use of this site constitutes acceptance of our User Agreement and Privacy Policy. © 2010 Website.com. All rights reserved.</p>
</body>
</html>
and here is the css:
body
{
font-family: verdana, sans-serif;
min-width: 800px;
}
h1
{
display: inline;
font-variant: small-caps
}
h1 a
{
color: #090;
text-decoration: none;
}
h1 a:hover
{
color: #0A0;
}
#menu
{
float: right;
display: inline;
margin: 0;
padding: 0;
font-variant: small-caps;
}
#menu ul
{
margin: 0;
padding-left: 0;
float: left;
font-weight: bold;
}
#menu ul li
{
float: left;
display: inline;
}
#menu ul li a
{
color: #090;
background-color: #F3F3F3;
padding: 2px 6px 4px 6px;
text-decoration: none;
}
#menu ul li a:hover
{
font-weight: bolder;
color: #0A0;
background-color: #F3F3F3;
border-bottom: 4px solid #0A0;
padding-bottom: 0;
}
#footer
{
text-align: center;
font-size: x-small;
}
here is what is looks like now:
thanks for help!
I haven't looked into this much, but if you set the containing div's position: relative, you can just make the ul position: absolute; bottom: 0; right: 0 and it should go where you want it.
Example:
div {position: relative}
ul {position: absolute; bottom: 0; right: 0}
li {float: left; list-style: none}
--
<div>
<h1>Header</h1>
<ul>
<li>One</li>
<li>Two</li>
<li>Etc...</li>
</ul>
</div>
There's no property floating it bottom-right or top-right. But without changing your html structure you can just add a top margin to your menu div
#menu {
....
margin-top:20px;
}
You can use table:
<table id="title">
<tr>
<td>
<h1>Website.com</h1>
</td>
<td>
<div id="menu">
<ul>
<li>Home</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>About</li>
</ul>
</div>
</td>
</tr>
</table>
And add this into your CSS file:
#title
{
width:100%;
}
#title td+td
{
text-align:right;
vertical-align:center;
}
Vertical align is default set to center, so you need not to set it.
Or if you don't want to use table, you can just set padding-top:10px; into #menu ul.
Related
Beginner with HTML here. I've been getting a pretty funky error with my HTML script. When I display it, the footer looks it was formatted like an inline element. It is showing up on the side of my timeline rather than at the bottom of the page.
Here is a screen shot:
Webpage Screenshot
Here is the code:
<DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>About Mangetsu Budogu</title>
<style>
/*Total Body width must be greater than widths for content */
/*global scope css */
body{
width: 1080px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
.main_content{
float: left;
width: 620px;
margin: 10px;
}
/* Nav Bar CSS */
nav {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
border-radius: 25px;
width: 99%;
text-align: center;
}
nav a{
float: center;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover{
background-color: red;
}
nav li{
display: inline;
padding: 5px;
}
/* Timeline */
.timeline{
float: left;
width: 300px;
margin: 10px;
}
li{
margin: 10px 0;
}
/* Main Content*/
#main_heading{
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
}
footer {
display: block;
}
</style>
</head>
<header>
<center><img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/7/76/Sakai_Kamon.svg" width="200" height="200"/></center>
<nav>
<ul id="nav_li">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Classes</li>
<li>Contact</li>
</ul>
</nav>
</header>
<body>
<h1 id="main_heading">About Mangetsu Budogu</h1>
<article class="main_content">
<h2>Beginnings</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Praesent posuere felis non turpis venenatis porta. Ut vel ultrices ipsum, vel blandit ipsum. Fusce rhoncus eget mauris ut pellentesque. Aenean condimentum lacus aliquam tristique efficitur. Nam commodo mattis dolor id molestie. Nulla molestie, magna suscipit gravida placerat, tortor libero faucibus risus, ac lacinia lacus metus at ex. Integer auctor sollicitudin quam, in gravida diam rhoncus non. Praesent lacinia velit est, et efficitur velit lobortis quis. Donec eleifend gravida sem aliquet finibus. Duis tempus, orci vel blandit luctus, sem sapien rhoncus enim, eu consequat ex mauris posuere augue. Etiam mi sem, scelerisque sit amet dictum eget, eleifend id urna. Fusce non condimentum dui, vel rhoncus nisl. Sed lacinia dui non lacinia mollis. Maecenas sodales lorem et est sodales molestie.
</p>
<p>
Nam et ipsum ac est ornare mattis. Mauris aliquet consequat lorem id lacinia. Nunc vulputate mollis bibendum. Duis sed enim a turpis mollis consectetur vitae vel mi. Phasellus quis lectus velit. Morbi vel libero pulvinar tortor placerat placerat. Suspendisse id ante leo. Etiam eu facilisis enim. Cras lorem tellus, bibendum eget turpis vitae, porta blandit lorem. Nam ut dui eu mauris malesuada ultricies. Cras nec erat dictum, ultricies sem non, vestibulum arcu. Fusce varius imperdiet nulla eu convallis. Curabitur quis mattis felis, non pretium ex. </p>
<h2>The 1990s Era</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere felis non turpis venenatis porta. Ut vel ultrices ipsum, vel blandit ipsum. Fusce rhoncus eget mauris ut pellentesque. Aenean condimentum lacus aliquam tristique efficitur. Nam commodo mattis dolor id molestie. Nulla molestie, magna suscipit gravida placerat, tortor libero faucibus risus, ac lacinia lacus metus at ex. Integer auctor sollicitudin quam, in gravida diam rhoncus non. Praesent lacinia velit est, et efficitur velit lobortis quis. Donec eleifend gravida sem aliquet finibus. Duis tempus, orci vel blandit luctus, sem sapien rhoncus enim, eu consequat ex mauris posuere augue. Etiam mi sem, scelerisque sit amet dictum eget, eleifend id urna. Fusce non condimentum dui, vel rhoncus nisl. Sed lacinia dui non lacinia mollis. Maecenas sodales lorem et est sodales molestie.
</p>
</article>
<div class="timeline">
<h3>Mangetsu Budogu Timeline</h3>
<ul>
<li><time>1991</time>: Established Flagship Store in <strong>Kyoto, Japan, Nishijin District</strong></li>
<li>1995: Created first Kendogu Website in Japan</li>
<li>1997: Establishment of 2nd Store in <strong>Shinagawa District, Tokyo</strong></li>
<li>1999: Creation of the Mangetsu Budogu Reward Points</li>
<li>2001: Establishment of 3rd Store in <strong>Nakamura District, Nagoya</strong></li>
<li>2010: Creation of the Shingsengumi Line of Bogu</li>
<li>2011: First Overseas Store in Los Angeles, California</li>
</ul>
</div>
<footer>
© Mangetsu Budogu 2018
</footer>
</body>
</html>
You need to clear the float property you have assigned to <article class="main_content"> and <div class="timeline">. Just add this element before footer.
<div style="clear:both;"></div>
Your .main_content and the timeline are floating elements which don't span the whole width of the body, that's why the footer is displayed next to it (it "floats" next to the floating elements).
To avoid this, add clear: both to the footer CSS
I have the following css file:
/*** Tabbed Navigation ***/
.ls-nav {
display: inline;
list-style-type: none;
padding: 0 25px 0 25px;
}
.ls-nav a {
text-decoration: none;
color: #000;
transition: .3s background-color;
}
.ls-nav a:hover {
background-color: #919191;
}
.ls-nav .current a {
background: #ffaacc;
}
.currentCrossLink {
font-weight: bold;
}
.ls-nav ul {
padding:0;
clear: both;
display: block;
margin: auto;
overflow: hidden;
}
.ls-nav ul li {
display: inline;
list-style-type: none;
padding: 0 25px 0 25px;
}
.ls-nav ul li a {
display: inline;
list-style-type: none;
padding: 0 25px 0 25px;
}
and the final effect looks like this:
I would like to have this menu items not aligned to the left, but rather centered - can you help me with that? Thanks!
about the html code, it looks like this:
<div class="liquid-slider" id="slider-1">
<div>
<h2 class="title">Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Slide 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Slide 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Slide 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
as you can see there's no ul li list or anything, I think it's handled by the Javascript plugin that I'm using - http://liquidslider.com/documentation/
Use inline-block to make center align navigation!
Add text-align: center to ul
.ls-nav ul {
padding:0;
clear: both;
display: block;
margin: auto;
overflow: hidden;
text-align: center;
}
Make inline-block to all li
.ls-nav ul li {
display: inline-block;
list-style-type: none;
padding: 0 25px 0 25px;
}
Also make the wrapper block as you can not have block ul inside the inline wrapper!
.ls-nav {
display: block;
list-style-type: none;
padding: 0 25px 0 25px;
}
Try this :
.ls-nav ul li{
display: block;
width: 5em; // You can use: px's / em's or % here
margin-left: auto;
margin-right: auto;
}
It should work.
give .ls-nav ul a width property
I'm making a website that is using ajax calls to load a content pane. Just mocking this up quick with some data, (on my website the ajax is working fine, so no need for that here) I cannot get the content pane to scroll when it overflows - the entire page scrolls instead.
There are a TON of questions similar to this but every one I've come across they have not used the overflow tag and it fixed their problem. I've tried that but had no success.
I'm not sure how to get the div to recognize that it is being overflowed. The only way so far that I've managed to get it to scroll, is fixing the height, however I feel like that's poor to do, because depending on the screen size I want it to scroll like one would expect.
Here's the html:
<body>
<div id="content-container">
<img src="http://i.imgur.com/69BtzId.png" alt="logo">
<div class="navbar">
<nav>
<ul>
<li class="homeLink"> HOME
</li>
<li id="activePortfolioLink"> PORTFOLIO
</li>
<li class="aboutLink"> ABOUT
</li>
</ul>
</nav>
</div>
<div id="portfolioUnderline"></div>
</div>
<div id="left">
<ul class="verticalNavBar">
<li id="webDesignLink"> <a>WEB DESIGN</a>
</li>
<li id="uiLink"> <a>USER INTERACTION DESIGN</a>
</li>
<li id="graphicDesignLink"> <a>GRAPHIC/ TYPOGRAPHY DESIGN</a>
</li>
</ul>
</div>
<div id="verticalLine"></div>
<div id="rightContent">
<div class="portfolioImages">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut massa in tortor ullamcorper iaculis. Ut placerat imperdiet metus sed pellentesque. Proin iaculis erat eget fringilla lobortis. Pellentesque sit amet urna condimentum, tristique erat et, egestas ante. Duis eu pulvinar leo, fringilla posuere ligula. Nunc commodo tellus at lorem interdum feugiat. Cras varius consequat diam vitae scelerisque. Mauris nec ligula in mi accumsan scelerisque sed vel augue. Aliquam elementum, dolor id ornare feugiat, ante justo sollicitudin erat, ut gravida velit nibh vel velit. Fusce ultrices consectetur eros, ac tincidunt libero auctor ut. Quisque dapibus congue arcu sed imperdiet. Pellentesque lorem nisi, dictum sit amet libero in, cursus eleifend ante. Nunc vel euismod erat. Duis massa tellus, tincidunt in fermentum ut, sagittis vulputate lectus. Nunc ut iaculis nibh. In congue laoreet arcu commodo imperdiet. Nullam rutrum augue nec mauris rhoncus facilisis. Donec bibendum luctus magna. Vivamus tempor egestas turpis. Curabitur non porta lorem, nec elementum ante. Cras faucibus consequat augue, laoreet pretium lorem tincidunt sed. Vestibulum magna dolor, pulvinar vitae facilisis eget, posuere sit amet est. Suspendisse vel elit a neque laoreet faucibus eget et quam. Integer feugiat, tellus sit amet tempus dignissim, neque justo congue enim, quis commodo neque neque quis orci. Suspendisse scelerisque erat lobortis felis fermentum, in molestie nulla pharetra. Suspendisse lacinia ac orci et tincidunt. Duis lobortis at leo a viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam libero turpis, consequat non convallis at, eleifend non dolor.</br>
</br>
</br>
</br>
</br>Maecenas tincidunt lorem vitae fringilla consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet magna tincidunt, pellentesque arcu posuere, euismod lectus. Sed nec pellentesque diam, id varius quam. Praesent mattis sapien odio, in mattis dui tempus sit amet. Morbi pulvinar odio nec augue tempus varius. Sed porttitor consequat magna, sit amet lobortis mauris congue eleifend. Donec pretium elit vitae egestas rutrum. Sed sapien libero, vulputate eu lacinia sit amet, aliquam et elit. Aenean nisi mi, vulputate id nulla ut, vestibulum porta enim. Nunc quis tellus eleifend, adipiscing lorem in, congue justo. Vivamus ornare risus quis faucibus pretium. Vestibulum eu velit placerat, lacinia justo rutrum, sagittis nisi. Donec quis tincidunt justo, eu posuere mauris. Morbi eleifend, dui eget aliquet adipiscing, tellus risus hendrerit dolor, non aliquet magna sapien malesuada ante. Fusce lobortis commodo sem id tempus. Nulla eget vehicula mi, id volutpat erat. Proin sed enim egestas, rhoncus ipsum a, consectetur mi. Quisque est arcu, tempus a ligula eu, aliquam elementum quam. Sed tristique sit amet sapien eget ornare. In vitae adipiscing neque. Ut aliquet felis vitae porttitor vehicula. Morbi aliquam rhoncus lacinia. Vestibulum at viverra nisl. Donec rhoncus, dolor eu luctus egestas, magna leo consequat justo, ac venenatis odio ligula ac tortor. Nullam faucibus ante enim, vitae cursus mauris interdum ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc turpis massa, viverra vitae rutrum non, elementum sit amet orci.</p>
</div>
</div>
</body>
Here's the CSS:
* {
font-family:'Lato', sans-serif;
font-weight: lighter;
padding: 0;
margin: 0;
color:white;
}
body {
background: #111111;
height: 100%;
}
#content-container {
background-color: #111111;
height: 113px;
width: 100%;
}
#content-container img {
padding: 15px;
padding-top: 15px;
/*float: left; */
}
.navbar {
float: right;
background-color: #111111;
font-size: 25px;
padding-top: 45px;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 15px;
float:right;
}
nav ul li.homeLink a {
padding-left: 41px;
padding-right: 43px;
}
nav ul li.portfolioLink a {
padding-left: 9px;
padding-right: 9px;
padding-bottom: 1px;
}
nav ul li.aboutLink a {
padding-left: 37px;
padding-right: 37px;
}
#activePortfolioLink a {
padding-left: 9px;
padding-right: 9px;
background: #0033cc;
font-weight: normal;
}
#portfolioUnderline {
background-color: #0033cc;
width: 100%;
height: 10px;
margin-top: -12px;
}
#left {
float: left;
width: 300px;
overflow: hidden;
}
#rightContent {
margin-left: 300px padding-left:300px;
height:100%;
overflow:scroll;
}
.verticalNavBar {
float: right;
text-align: right;
margin-top: 20px;
color: white;
font-size: 15px;
}
.verticalNavBar li {
list-style: none;
color: white;
padding-top:10px;
padding-bottom: 10px;
}
.verticalNavBar li a {
text-decoration: none;
color: white;
padding: 10px;
}
#verticalLine {
background-color: #0033cc;
float:left;
width: 10px;
height: 905px;
}
#webDesignLink a {
background: #0033cc;
font-weight: normal;
}
.portfolioImages {
margin: 0 auto;
padding-top: 20px;
padding: 10;
margin-right: 10%;
margin-left: 10%;
margin-bottom: 20px;
overflow: auto;
}
img.individualImage {
margin-left: 450px;
}
.portfolioImages p {
font-size: 15px;
font-weight: lighter;
text-align: center;
}
Here's a jsfiddle of the code: http://jsfiddle.net/GGSSj/
Thanks for your time!
You can fix the height in relation to the screen size, but you have to fix the height /somehow/ to get it to scroll independently.
Here is a fiddle with absolute positioning of each segment: http://jsfiddle.net/GGSSj/3/
#content-container {
position:absolute; top:0; left:0; width:100%; height:113px;
}
#left {
position:absolute; top:123px; bottom:0; left:0; width:300px;
}
#rightContent {
position:absolute; top:123px; bottom:0; left:310px; right:0;
overflow-y:scroll;
}
You can fix the height in relation to the screen size, but you will have to fix the height the scrollable container (somehow with javascript for full screen height) to get it to scroll independently.
Give it a try : fiddle updated here
#rightContent {
height: 555px; /* fit height to your needs */
overflow: auto;
}
You need to set your top area and your left area to position:fixed;
http://jsfiddle.net/GGSSj/
#left {
position:fixed;
top: 113px;
left: 0;
width: 300px;
overflow: hidden;
}
#rightContent {
margin-left:300px;
padding-top:113px;
height:100%;
overflow: auto;
}
#content-container {
position: fixed;
background-color: #111111;
height: 113px;
width: 100%;
}
I am creating mega drop down menu. It is all done by HTML and CSS. My problem is that when you select one of LIs, it gets maximalized at the expense of the other LIs.
I do not know where should be the problem, could you give me a suggestion how to solve it?
HTML
<div id="wrapper">
<div id="menu2">
<ul id="menu2_ul">
<li class="list">Domů
<div class="sub">
<div class="submenu">
<ul class="submenu_left_menu">
<li>Domů</li>
<li>Pojištění</li>
<li>Půjčky</li>
<li>Hypotéky</li>
<li>Účty a spoření</li>
<li>Energie</li>
<li>Investice</li>
<li>Slevy</li>
</ul>
</div>
<div class="submenu_content">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat risus leo, id placerat massa malesuada in. Vestibulum venenatis diam vel cursus dignissim. Aenean ac leo nunc. Fusce erat mauris, commodo at faucibus non, eleifend id nibh. Aliquam non ligula dignissim, venenatis nisi in, lacinia velit. Maecenas pharetra urna metus, nec dictum mauris suscipit et. Donec posuere massa vitae magna tempus, eu interdum nulla consectetur. Mauris consequat fringilla turpis, eu venenatis felis viverra sed. Fusce a placerat lectus. Sed vel sem sodales, eleifend nunc ac, viverra felis. Donec egestas ante nec enim semper dictum. Aenean mollis sodales lorem, sed pharetra leo sollicitudin id. Cras nulla neque, gravida nec rutrum sed, mattis quis nisl. Duis vulputate tempus diam eget tincidunt. Nunc elementum eu ante iaculis laoreet.</p>
</div>
<div class="submenu_poll">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat risus leo, id placerat massa malesuada in. Vestibulum venenatis diam vel cursus dignissim. Aenean ac leo nunc. Fusce erat mauris, commodo at faucibus non, eleifend id nibh. Aliquam non ligula dignissim, venenatis nisi in, lacinia velit. Maecenas pharetra urna metus, nec dictum mauris suscipit et. Donec posuere massa vitae magna tempus, eu interdum nulla consectetur. Mauris consequat fringilla turpis, eu venenatis felis viverra sed. Fusce a placerat lectus. Sed vel sem sodales, eleifend nunc ac, viverra felis. Donec egestas ante nec enim semper dictum. Aenean mollis sodales lorem, sed pharetra leo sollicitudin id. Cras nulla neque, gravida nec rutrum sed, mattis quis nisl. Duis vulputate tempus diam eget tincidunt. Nunc elementum eu ante iaculis laoreet.</p>
</div>
</div>
</li>
<li class="list">Pojištění
<div class="sub">
<div class="submenu">
<ul class="submenu_left_menu">
<li>Domů</li>
<li>Pojištění</li>
<li>Půjčky</li>
<li>Hypotéky</li>
<li>Účty a spoření</li>
<li>Energie</li>
<li>Investice</li>
<li>Slevy</li>
</ul>
</div>
<div class="submenu_content">
</div>
<div class="submenu_poll">
</div>
</div>
</li>
</div>
</div>
CSS
body {
background-color: black;
padding: 0px;
margin: 0px;
}
#wrapper {
margin: 0px;
padding: 0px;
height: 40px;
background-color: white;
}
#menu2 {
width: 981px;
margin: 0 auto;
padding: 0px;
}
#menu2 ul {
list-style: none;
display: table;
margin: 0px;
padding: 0px;
height: 40px;
}
#menu2 li.list {
display: table-cell;
line-height: 40px;
border-left: 1px solid grey;
position: relative;
}
#menu2 div.sub {
margin:0;
display:none;
background-color: white;
}
#menu2 li.list:hover div.sub {
display: block !important;
width: 981px !important;
}
/******************************************************************************\
\******************************************************************************/
#menu2 div.sub .submenu {
float: left;
width: 220px;
}
#menu2 div.sub .submenu_content {
width: 550px;
float: left;
}
#menu2 div.sub .submenu_poll {
}
1. Set the div.sub to absolute
Yes, they will not have the same starting position: so the solution is to manually give each one of them a margin-left minus value. You can either give them all and id, or use CSS3 selectors (e.g. #menu2:nth-child(1) {margin-left: -...}) .
Disadvantage: Manually specify an id and a specific margin-left for every div.sub + to make it easier you will probably have to give the menu tabs the same width.
2. Set the div.sub to fixed
In this case, every div will start at exactly the same position; however be careful that it's width or height aren't superior to another element, because the document won't stretch for fixed pos elements.
Disadvantage: Won't work if you have other divs after it because the fixed div will follow the screen. Won't work if no other elements are larger than the divs.sub IN the flow of the document.
3. Experiment with the CSS3 :target selector
Target selectors can modify the link in the href of an anchor. An Example here. However, you will have to specify id's for every div.sub. This selector also allows you to put all your div.sub's directly in your content section instead of nesting them for each menu item. Not compatible with IE8-.
Disadvantage: Not compatible with IE8-
4. Use js/jQuery instead
Probably the 'easiest' way for some, but also the most 'heavy' one.
Disadvantage: Heavier, won't work in JS-disabled browsers.
I have the following code. Jfiddle is here. As seen, the bottom borders, what resemble <HR> tags extend the entire length of the page.
I would like to limit the borders of <h1> and <h2> tags to be only 30% of the page. While <h3> tags remain extending across the entire page. Is this possible with css?
EDIT: with a follow up question, how would I change the css on the <h3> tag so that under the border is roughly one line of white space the same size of the font as <h3>?
HTML
<HTML>
<HEAD>
<TITLE>Sample Wiki Page</TITLE>
<link rel='stylesheet' type = 'text/css' href = 'default.css' />
</HEAD>
<BODY>
<DIV id='content'>
<h3>Main Title</h3>
<h2>Sub Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros odio, venenatis ut suscipit eget, vestibulum id est. Vivamus aliquet lacus sit amet enim tempus in fermentum ipsum ornare. Pellentesque tincidunt orci sed sem luctus tristique. Ut a turpis ac nisi semper luctus. Nulla mattis ornare augue, vel lacinia purus porta eu. Vestibulum pulvinar justo dolor, in ultricies tellus. Nullam semper, ante at feugiat commodo, neque eros pulvinar ante, et porttitor velit orci eu magna. Duis mattis libero vitae magna lacinia tincidunt. Vivamus placerat elit a nisi ultrices elementum. Vestibulum condimentum posuere nulla, id ornare urna mattis id. Quisque ornare risus diam. Nunc malesuada leo sit amet mauris bibendum pharetra. Integer convallis orci id lorem volutpat suscipit.
Vestibulum ac magna libero, non condimentum neque. Integer vestibulum, quam at tempus fermentum, mi odio dictum nibh, quis venenatis velit ligula laoreet massa. Fusce lobortis augue eu ante bibendum consequat eget posuere neque. Mauris dui lorem, fringilla et auctor a, eleifend id nisi. Sed nunc tortor, blandit et malesuada quis, posuere pellentesque lorem. Nunc vehicula lectus eget tortor tempus sed pharetra diam luctus. Aenean odio leo, accumsan a vestibulum ut, tincidunt in mi. Curabitur commodo venenatis dolor, ultrices placerat nibh tempor nec. Duis eget odio mi, id imperdiet lectus. Aenean luctus bibendum arcu non egestas.
</p>
<h2>Code Section</h2>
<pre>
<xmp>
<HTML>
<HEAD>
<TITLE>Sample Wiki Page</TITLE>
<link rel='stylesheet' type = 'text/css' href = 'default.css' />
</HEAD>
<BODY>
<h3>Main Title</h3>
<h2>Sub Title</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros odio, venenatis ut
suscipit eget, vestibulum id est. Vivamus aliquet lacus sit amet enim tempus in fermentum
ipsum ornare. Pellentesque tincidunt orci sed sem luctus tristique. Ut a turpis ac nisi
semper luctus. Nulla mattis ornare augue, vel lacinia purus porta eu. Vestibulum pulvinar
justo dolor, in ultricies tellus. Nullam semper, ante at feugiat commodo, neque eros
pulvinar ante, et porttitor velit orci eu magna. Duis mattis libero vitae magna lacinia
tincidunt. Vivamus placerat elit a nisi ultrices elementum. Vestibulum condimentum posuere
nulla, id ornare urna mattis id. Quisque ornare risus diam. Nunc malesuada leo sit amet
mauris bibendum pharetra. Integer convallis orci id lorem volutpat suscipit.
Vestibulum ac magna libero, non condimentum neque. Integer vestibulum, quam at tempus
fermentum, mi odio dictum nibh, quis venenatis velit ligula laoreet massa. Fusce lobortis
augue eu ante bibendum consequat eget posuere neque. Mauris dui lorem, fringilla et auctor
a, eleifend id nisi. Sed nunc tortor, blandit et malesuada quis, posuere pellentesque lorem
. Nunc vehicula lectus eget tortor tempus sed pharetra diam luctus. Aenean odio leo,
accumsan a vestibulum ut, tincidunt in mi. Curabitur commodo venenatis dolor, ultrices
placerat nibh tempor nec. Duis eget odio mi, id imperdiet lectus. Aenean luctus bibendum
arcu non egestas.
<h2>Code Section</h2>
<pre>
</pre>
</BODY>
</HTML>
</xmp>
</pre>
</DIV>
</BODY>
</HTML>
CSS
#content pre {
padding: 1em;
border: 1px dashed #2f6fab;
color: black;
background-color: #f9f9f9;
white-space: pre;
margin: 1em 0px;
display: block;
font-family: monospace,Courier;
line-height: 1.1em;
width:70%;
}
#content h3{
font-size: 188%;
line-height: 1.2em;
color: black;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
}
#content h1, h2 {
color: black;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
}
You can use width: 30% for your first question, and margin-bottom: 1.2em for your second.
Here is your fiddle.
You can do something like this. http://jsfiddle.net/n5qRS/1/
<h1><span>Hello World</span></h1>
css
h1 span {
color: black;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
display: block;
width: 30%;
}
as for the second question, add a margin bottom to the h3 the same as the line height of the h3.
It is very odd that you are having your h3 as a the Main Title and h2 as the subtitle (that is reversed of how it "should" be). This fiddle uses pseudo-elements to get the border.
#content h1:after, h2:after {
content: '';
display: block;
width: 30%;
height: 0;
margin: 0 auto;
border-bottom: 1px solid #aaa;
}
The margin-bottom is added in that fiddle to the h3 for your follow-up.