Is there a way to have part of the text align left and the other right and stay in one line? I tried a few similar answers on similar questions but the result isn' close to what I'm hoping for
Example: TANYA RUMPFF left and SONGS OF A BIRD RIGHT within the 440px
HTML:
</head>
<div class="dean">
<ul>
<li>TANYA RUMPFF <p align="right">Songs of a bird</p></li>
<li>STANCE OONK Bolwerk</li>
<li>HARALD VLUGT Voor en na het meesterwerk</li>
<li>CORINNE BONSMA Secret garden</li>
<li>STEFAN KASPER Glitterkikkerlikker</li>
</ul>
</div>
<body>
</body>
the CSS:
.dean {width:440px;
background-color:#74f4ff;
}
.dean ul {
padding-left:-12px;
list-style-type: none;
padding-left:0;
padding: 0;
}
.dean ul li {
list-style-position:inside;
}
.dean a:hover {
text-decoration:none;
color:#000;
background-color:#fff;
}
.dean li:hover{
margin-left:-14px;
color:#F90;
list-style-type:disc;
}
.dean ul a {
text-decoration:none;
display:block;
padding-left:20px;
width:400px;
color:#000;
font-family:Arial, Helvetica, sans-serif;
}
you may float first element and use text-align:right;
li a{
display:block;
text-align: right;
}
li b {
float: left;
}
<ul>
<li><b>TANYA RUMPFF</b>Songs of a bird
</li>
</ul>
HTML
<ul>
<div id="textbox">
<li class="alignleft">TANYA RUMPFF</li>
<li class="alignright">Songs of a bird</li>
</div>
<div style="clear: both;"></div>
<div id="textbox">
<li class="alignleft">STANCE OONK</li>
<li class="alignright">Bolwerk</li>
</div>
<div style="clear: both;"></div>
<div id="textbox">
<li class="alignleft">HARALD VLUGT </li>
<li class="alignright">Voor en na het meesterwerk</li>
</div>
<div style="clear: both;"></div>
<div id="textbox">
<li class="alignleft">CORINNE BONSMA</li>
<li class="alignright">Secret garden</li>
</div>
<div style="clear: both;"></div>
</ul>
css
.alignleft {
float: left;
}
.alignright {
float: right;
}
try this. it might work
Related
I am styling the navbar my simple side with the following code:
Html:
<div>
<ul class="navbar-brand">
<a href='https://postimg.org/image/ukcombaed/' target='_blank'><img src='https://s10.postimg.org/7vnhmqt0p/IMG_20160804_WA032.jpg' border='0' alt='IMG-20160804-WA032'/><br /><a target='_blank' href='https://postimage.org/'> </a><br /><br />
</ul>
<ul class="navbar-right">
<li>home</li>
<li>about</li>
<li>delivery</li>
<li>services</li>
</ul>
</div>
CSS:
ul{
list-style:none;
display:inline;
}
li{
list-style: none;
display: inline;
width:100%;
padding: 10px;
}
ul.navbar-brand{
float:left;
}
ul.navbar-right{
float:right;
}
As my snippet shows( https://jsfiddle.net/Wosley_Alarico/t3uhg5n1/1/ ). The logo is floated to the left and the menu to the right as I want. But the problem is that the menu went the top and would actually like it to be positioned to the bottom.
How can I actually make the menu go to the bottom instead and keep it floated to the right?
I can see few issues:
For 1st a tag there is no closing of it
You can remove 2nd a if you are not using
ul can't be used with li so, changed it to div or span
Remove float:right from navbar-right class it will come in the bottom of logo.
add a ul class with magin, padding 0
ul{
list-style:none;
display:inline;
margin:0;
padding:0;
}
li{
list-style: none;
display: inline;
width:100%;
padding:10px 10px 10px 0;
}
ul.navbar-brand{
float:left;
}
ul.navbar-right{
}
<div>
<div class="navbar-brand">
<a href='https://postimg.org/image/ukcombaed/' target='_blank'><img src='https://s10.postimg.org/7vnhmqt0p/IMG_20160804_WA032.jpg' border='0' alt='IMG-20160804-WA032'/></a>
</div>
<ul class="navbar-right">
<li>home</li>
<li>about</li>
<li>delivery</li>
<li>services</li>
</ul>
</div>
ul.navbar-right{
float:right;
position:relative;
bottom:0;
}
Why is there border showing up around H3 in the red div, also on the slider div ?
I could not find any border code in the css.
More text so i can submit the question
Why is there border showing up around H3 in the red div, also on the slider div ?
I could not find any border code in the css.
Please helpWhy is there border showing up around H3 in the red div, also on the slider div ?
I could not find any border code in the css.
Please help
#charset "utf-8";
/* CSS Document */
.clearfix{ clear:both;}
body{
}
#font-face {font-family: Orator Std;
src: url(fonts/OratorStd.otf);}
#font-face {font-family: Century Gothic;
src: url(fonts/GOTHIC.TTF);}
.wrapper{ width:100%;
margin-left:auto;
margin-right:auto;
background-image:
overflow:hidden;
}
.header{ width:100%;
height:240;
margin-bottom:10px;
background:
}
.bannerbox {width:100%;
height:150px;
padding-top:50px;
; background-color:#FFF;
}
.bannercntr{
font-family: "Orator Std";
}
.bannergothic{font-family:"Century Gothic";
border: none;}
.blockimgs{height:250px;
width:250px;
float:left;
}
.megablock{width:1000px;
height:500px;
margin-left: auto;
margin-right:auto;
}
.blockimgsw1{height:250px;
width:250px;
float:left;
background-image:url(Images/australia.jpg)
}
.blockimgsw1:hover { background-image: url(Images/australia%20-%20Copy.fw.png)}
.blockimgsw2{height:250px;
width:250px;
float:left;
background-image: url(Images/Canada.jpg)
}
.blockimgsw2:hover { background-image: url(Images/Canada%20-%20Copy.fw.png)}
.blockimgsw3{height:250px;
width:250px;
float:left;
background-image: url(Images/china.jpg)
}
.blockimgsw3:hover { background-image: url(Images/china%20-%20Copy.fw.png)}
.blockimgsw4{height:250px;
width:250px;
float:left;
background-image: url(Images/dubai.jpg)
}
.blockimgsw4:hover { background-image: url(Images/dubai%20-%20Copy.fw.png)}
.blockimgsw5{height:250px;
width:250px;
float:left;
background-image: url(Images/europe.jpg)
}
.blockimgsw5:hover { background-image: url(Images/europe%20-%20Copy.fw.png)}
.blockimgsw6{height:250px;
width:250px;
float:left;
background-image: url(Images/singapore.jpg)
}
.blockimgsw6:hover { background-image: url(Images/singapore%20-%20Copy.fw.png) }
.blockimgsw7{height:250px;
width:250px;
float:left;
background-image:url(Images/southAfrica.jpg)
}
.blockimgsw7:hover { background-image: url(Images/southAfrica%20-%20Copy.fw.png)}
.blockimgsw8{height:250px;
width:250px;
float:left;
background-image: url(Images/USA.jpg)
}
.blockimgsw8:hover { background-image: url(Images/USA%20-%20Copy.fw.png)}
.ddmenubox{width:700px;
float:right;
}
.logodiv{float:left;}
<!-----Drop Down Menu---->
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000;z-index:1}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
<!----Drop Down Menu END--->
.rightheader{float:right;
height:240px;
width:500px;}
.horilist{ float:left;
list-style:none;
font-family:"Century Gothic";
font-size:30px;
font-weight:800;
padding-right:20px;
margin:0px auto;
}
.subbox {width:1000px;
height:280px;
padding-top:20px;
background-image:url(Images/matte-red.jpg);
background-repeat:repeat;
overflow:hidden;
}
<!-----SLIDER---->
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; height:400px;}
.banner ul li { float: left; }
<!-----SLIDER--END---->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Travel the World</title>
<link rel="stylesheet" type="text/css" href="main.css">
<!-----Slider----->
<!-----Slider end---->
</head>
<body>
<div class="header"> <div class="logodiv"> <img src="Images/One.png"> </div>
<div class="ddmenubox">
<ul id="drop-nav">
<li>Support</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Content Management
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
<li>Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<!---Insert Slider---->
<div class="banner">
<ul>
<li style="background-image:url(Images/002.jpg)">This is a slide.</li>
<li>This is another slide.</li>
<li>This is a final slide.</li>
</ul>
</div>
<!------SLIDER AREA END---->
<div class="bannerbox">
<center>
<h3 class="bannergothic">You can simple dream a great vacation. But it is a tough job to make it into a reality and to find <br>a travel company who delightfully crafts your trip. <br>At One World Holidayz we make it our pleasure to transform your dream holiday into a reality.</h3>
</center>
</div>
<div class="megablock">
<div class="blockimgsw1">
</div>
<div class="blockimgsw2">
</div>
<div class="blockimgsw3">
</div>
<div class="blockimgsw4">
</div>
<div class="blockimgsw5">
</div>
<div class="blockimgsw6">
</div>
<div class="blockimgsw7">
</div>
<div class="blockimgsw8">
</div>
</div>
<div class="clearfix"></div>
<div class="bannerbox">
<center>
<h2 class="bannercntr"> ADVENTURE IS EVERYWHERE </h2>
<h3 class="bannergothic"> You can simple dream a great vacation. But it is a tough job to make it into a reality and to find a travel company who delightfully crafts your trip. At One World Holidayz we make it our pleasure to transform your dream holiday into a reality.</h3>
</center>
</div>
<div class="subbox">
<ul class="horilist">
<li class="horilist">
China
</li>
<li class="horilist">
Australia
</li>
<li class="horilist">
Canada
</li>
<li class="horilist">
Dubai
</li>
<li class="horilist">
New Zealand
</li>
<li class="horilist">
Europe
</li>
</ul>
<ul>
<li class="horilist">
Hong Kong
</li>
<li class="horilist">
Asia
</li>
<li class="horilist">
USA
</li>
<li class="horilist">
South Africa
</li>
<li class="horilist">
United Kingdom
</li>
</ul>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>
<script>
$(document).ready(function(){
$('.banner').unslider();
});
</script>
</body>
</html>
You have your
ul li{
display: block;
position: relative;
float: left;
border: 1px solid #000;
z-index: 1;
}
Which the border 1px make your slider to hold the border. So just remove the border or just make em 0 and you are good to go with your slider with no border.
I have this HTML code and CSS for a horizontal menu. It displays the links (boxes) from left to right floated to the left of the page.
What is the best way to make one of the links (boxes) display to float to the right of the page?
I have tried using float right with the below CSS copied as navigation-right and changed the HTML as needed but that did not work.
HTML
<div class="navigation-left">
<ul>
<li>Home</li>
<li>SAF</li>
<li>Acudetox</li>
</ul>
</div>
CSS
.navigation-left {
height:auto;
list-style:none;
margin-right:40px;
display:inline;
}
.navigation-left li{
width:200px;
height:25px;
margin:5px;
padding:5px;
background-color:#666666;
border:none;
text-align:center;
display:inline-block;
}
.navigation-left li:hover{
background-color:#f36f25;
color:#FFFFFF;
}
.navigation-left li a{
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.navigation-left li.current {
background-color:#F36F25;
}
.navigation-left li.current a {
color:#FFFFFF;
}
http://jsfiddle.net/W2x5y/
Is this Fiddle what you wanted?
<div class="navigation-left" style="float:left">
<ul>
<li>Home</li>
<li>SAF</li>
</ul>
</div>
<div class="navigation-left">
<ul style="float:right; ">
<li>Acudetox</li>
</ul>
</div>
As you might expect, a simple float: right; does the trick.
<div class="navigation-left">
<ul>
<li>Home</li>
<li style="float: right">SAF</li>
<li>Acudetox</li>
</ul>
</div>
http://jsfiddle.net/W2x5y/1/
I think that you'd have to target some of the li tags with a class if you wanted to do that. Plus you need to max the width of the containing ul in order to give it room to float on the right.
http://jsfiddle.net/W2x5y/2/
<div class="navigation-left">
<ul>
<li>Home</li>
<li>SAF</li>
<li class="right">Acudetox</li>
</ul>
</div>
ul {
width: 100%;
}
.right {
float: right;
}
Interesting questions. I'm hoping this helps.
You should anchor the navigation-left and navigation-right to a navigation box itself.
html:
<div class="nav-box">
<div class="nav-left">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="nav-right">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
CSS
body .nav-box {
top:0;
width:100%;
height:auto;
background:#eee;
overflow:hidden;
}
.nav-box .nav-left {
display:inline;
left:0;
float:left;
width:auto;
}
.nav-box .nav-right {
display:inline;
right:0;
top:0;
float:right;
width:auto;
}
Working example: http://jsfiddle.net/VA7ya/1/
It seems like the two navs are sufficient different to split them into two elements. Create two elements. Here's a Fiddle: http://jsfiddle.net/q7e3M/1/
<div class="container">
<div class="navigation-left">
<ul>
<li>Home</li>
<li>SAF</li>
</ul>
</div>
<div class="navigation-right">
<ul>
<li>Acudetox</li>
</ul>
</div>
</div>
If you want to keep the same element: http://jsfiddle.net/Afxkt/1/
<ul class="navigation">
<li>Home</li>
<li>SAF</li>
<li class="navigation-right">Acudetox</li>
</ul>
CSS:
.navigation {
display: inline;
list-style: none;
}
.navigation li {
float: left;
}
.navigation-right {
float: right;
}
All at right side
.right_side{ float:right}
<div class="navigation-left right_side">
<ul>
<li>Home</li>
<li>SAF</li>
<li>Acudetox</li>
</ul>
</div>
Last <li> to the right
.navigation-left li:last-child{ float:right}
first <li> to the right
.navigation-left li:first-child{ float:right}
second <li> to the right
.navigation-left li:nth-last-child(2){ float:right}
EDIT: I have found this code, which appears to be sorta working the way I want it to. You can check it out live at EDIT - I still can't get it to sit within my #main div though! I've tried using both 100% and 990px within #menu span for width - neither seem to work.
<div id="menu">
<ul>
<li>Menu item 1</li>
<li>Menu item 3</li>
<li>Menu item 2</li>
</ul>
<span></span>
</div>
#menu {
text-align: justify;
}
#menu * {
display: inline;
}
#menu span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
END EDIT
I have a menu I'm having some issues with - mainly horizontal issues :)
Basically, when you view the website in Chrome, the menu is centered the way I want it to be.
When you view the website in FireFox, the menu is 5-10px short on the right side.
And when you view it in Internet Explorer, the menu is not sitting left and is overflowing off of the right side of the page.
View it for yourself at: EDIT (Keep in mind, index2.php here, not the original index)
So my question is:
How can I style/code this menu correctly to fit within my parent div?
I did look through previous topics with similar questions, however, was unable to make anything work. Thank you in advance :)
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EDIT </title>
<link rel="stylesheet" href="style.css" type="text/css">
<style>
#sliderwrapper {width:635px;}
#control {
text-align:right;
margin-top:5px;
}
#control a {
background:#87e7fa;
padding:0 5px;
color:#FFFFFF;
text-transform:uppercase;
text-decoration:none;
margin-left:5px;
}
#control a.active {background:#265db9;}
#control a span {visibility:hidden;}
.sexyslider-control span {display:none;}
.sexyslider-title {
font-weight:bold;
color: #FFFFFF;
}
</style>
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.sexyslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slider").SexySlider({
width : 981,
height : 500,
delay : 3000,
strips : 18,
autopause : false,
<!--navigation : '#navigation',--!>
control : '#control',
direction : 'left',
effect : 'fade'
});
});
</script>
<body>
<div id="wrapper">
<div id="header"><img src="images/header.gif" alt="" /></div>
<div id="main">
<ul>
<h2><li>Home</li>
<li>Meet Our Team
<li>Office Information</li>
<li>First Visit</li>
<li>Dental Topics</li>
<li>Office Tour</li>
<li>Contact Us</li></h2>
</ul>
<div id="sliderwrapper" class="clearfloat">
<div id="slider" style="width:100%">
<img src="images/slide1.jpg" alt="" "/>
<img src="images/slide4.jpg" alt="" "/>
<img src="images/slide2.jpg" alt="" " />
<img src="images/slide3.jpg" alt="" "/>
<img src="images/slide4.jpg" alt="" "/>
<img src="images/slide5.jpg" alt="" "/>
<img src="images/slide6.jpg" alt="" "/>
</div>
<div id="control" style="margin-top:10px; margin-right:-347px;"></div>
</div>
</div>
<div id="footer"><img src="images/footer.gif" alt=""/></div>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
background-color: #87e7fa;
font-size:100%;
text-align:center;
}
#wrapper {
margin:0 auto;
padding:0;
text-align:center;
background:url('images/bg.gif') repeat-y;
width:1200px;
}
#header {
width:1200px;
height:358px;
}
#main {
width:990px;
height:100%;
margin:0 auto;
text-align:left;
}
#footer {
clear:both;
width:1200px;
height:354px;
}
h2 {
font-family:soos_font;
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
}
ul
{
list-style-type:none;
margin:10 0;
padding:0;
}
li
{
display:inline;
width:100%;
margin:0 auto;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#87e7fa;
text-align:center;
padding:7px;
text-decoration:none;
text-transform:uppercase;
border-radius:5px;
margin:0 auto;
}
a:hover,a:active
{
background-color:#3650a2;
}
I have update you css
css
#main {
width:990px;
height:100%;
margin:0 auto;
text-align:center;
}
#main ul{
list-style-type:none;
margin:0;
padding:0;
}
#main li{
display:inline-block;
/*width:100%;*/
margin:0 3px;
}
html
<div id="main">
<ul>
<li>Home</li>
<li>Meet Our Team
<li>Office Information</li>
<li>First Visit</li>
<li>Dental Topics</li>
<li>Office Tour</li>
<li>Contact Us</li>
</ul>
<br style="clear:both;"/>
</div>
here is the jsFiddle File
Also don't wrap li in to h2, this is not a valid code.
I am having problems overlaping two boxes. Should I use absolute positioning? z-index or what techniques are out there? By the way I want them to overlap is just that I want to make sure it works cross modern browsers. IE8 or +
I cant push the black box to the center why?
<!DOCTYPE HTML>
<html>
<head>
<title>Metropolitan State Hospital Intranet</title>
<link rel="stylesheet" type="text/css" href="Home.css">
</head>
<body>
<div id="masthead">
<div id="logo">
Logo here
</div><!--end logo-->
<div id="header">
<div id="horizontalMainMenu">
<ul>
<li>About Us |</li>
<li>Contact Us |</li>
<li>Metro Link |</li>
<li>WaRMSS Login </li>
</ul>
<br style="clear:left;"><!--I used float:left in the css to stack the list items now I need to clear it-->
</div>
</div>
<!--end header-->
</div><!--end masthead-->
<div id="container">
<div id="left_col">
<div id="verticalMainMenu">
<ul>
<li>Air Quality Control</li>
<li>CalATERS</li>
<li>Email Encryption</li>
<li>Employee Guide</li>
<li>Patient Special Function Requests</li>
<li>Request Home Address <br> Confidentiality Form</li>
<li>Travel Store</li>
</ul>
</div><!--verticalMainMenu ends here-->
</div><!--left_col ends here-->
<div id="page_content">
<div id="horizontalBodyMenu">
<ul>
<li>Home</li>
<li>Clinical</li>
<li>Administrative</li>
<li>Service</li>
<li>Search</li>
</ul>
<br style="clear:left">
</div>
</div><!--page_content ends here-->
</div>
<div id="footer">
Footer
</div><!--end footer-->
</body>
</html>
CSS:
/* CSS layout */
*{
padding:0;
margin:0;
}
body {
margin: 0;
padding: 0;
}
#masthead {
min-width: 600px;
}
#logo {
float: left;
width: 200px;
background-color:yellow;/*I dont know what color this is in the template*/
}
#header {
background-color:yellow;/*I dont know what color this is in the template*/
height:300px;
}
#container {
clear: both;
min-width: 600px;
}
#left_col {
float: left;
width: 200px;
background-color:red; /*I dont know what color this is in the template*/
}
#page_content {
background-color:black;
margin:-50px 0 0 0;
width:95%;
}
#footer {
clear: both;
}
/* CSS common layout ends here*/
/* horizontalMainMenu starts here*/
#horizontalMainMenu{
width:100%;
background-color:transparent;
}
#horizontalMainMenu ul{
margin:0;
padding:0;
float:left;
}
#horizontalMainMenu ul li{
display:inline;
}
#horizontalMainMenu ul li a{
float:left;
text-decoration:none;
color:white;
padding:5px 9px;
}
/*horizontalMainMenu ends here*/
/*Body Menu Starts here*/
#horizontalBodyMenu ul{
list-style:none;
}
#horizontalBodyMenu ul li{
display:inline;
}
/* horizontalBodyMenu ends here*/
#horizontalMainMenu ul li a:visited{
color:white;
}
#horizontalMainMenu ul li a:hover,#mainMenu ul li .current{
color:#fff;
background-color:#0b75b2;
}
#verticalMainMenu ul{
margin:0;
padding:0;
list-style:none;/*removes the default bulltets*/
}
#verticalMainMenu li{
padding:0 0 0 10px;
background-image:url('');
background-repeat:no-repeat;
background-position:.5em;
line-height:200%;
}
#verticalMainMenu li a:hover{
color:#fff;
background-color:#0b75b2;
}
You should do it normally, and then pull "Box 2" upwards with margin-top: -80px.
This will work in "all browsers".
Here's a good article concerning negative margins:
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
You need to position box2 relative to box1. Lookup html relative positioning.
http://www.barelyfitz.com/screencast/html-training/css/positioning/