I'm experiencing an issue with my CSS when working in Firefox. It should be pretty simple. Everything is working fine except that I cannot seem to get the links in the header aligned to the right (the color will change as well as any other modifications except alignment). The only way I can do it is to float it right, but that reverses the order of the links and seems wrong. Maybe there is a better way to deal with the links in the header than the span that I've used? I will have some more links in the header in another position, though, so I need to specify which links I'm referring to somehow...
Take a look at the code below:
First, the HTML:
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">#import "layout2.css";</style>
</head>
<body>
<div id="all">
<div id="head">
<span class="headlinks">
Logout
</span>
</div>
<div id="menu">
</div>
<div id="content">
</div>
</div>
</body>
</html>"
Now, the CSS:
/* Layout2.css */
#all {
border: none;
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
}
.headlinks a {
text-align:right;
color:#ffffff;
}
#head {
border: none;
position: absolute;
left: 0%;
width: 100%;
height: 10%;
background-color:#336699;
}
#head h1 {
margin-top: 1%;
text-align:right;
}
#menu {
border: none;
position: absolute;
left: 1%;
top: 12%;
width: 20%;
height: 90%;
padding-left: 1%;
padding-right: 1%;
background-color:#b1b2a3;
}
#content{
border: none;
position: absolute;
left: 25%;
top: 12%;
width: 72%;
height: 90%;
padding-left: 1%;
padding-right: 1%;
background-color: #eeeeee;
}
Thanks!
Change <span class="headlinks> to a <div>, and add text-align: right to its CSS style.
You want:
#head { text-align: right; }
The head div is a block element with 100% width. Headlinks is an inline element containing one link. text-align is used on a block element its contents, not on inline elements to indicate how to place them inside their parent.
An alternative approach is to make headlinks a block level element:
span.headlinks { display: block; text-align: right; }
Which to use depends on what you want to achieve.
Try putting the 'text-align:right' on the 'head' div rather than the 'headlinks' span. This style applies to block level elements like div, not inline elements like span.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technology-BBC News
</title>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
width: 1265px;
margin: 0 auto;
height: 40px;
background-color: #FFFFFF;
}
#logo {
margin-top: 8px;
width: 85px;
float: left;
margin-right: 15px;
}
.topbar-section {
float: left;
border-left: 1px solid #CCCCCC;
height: 100%;
}
#signin-img {
width: 22px;
margin-top: 11px;
margin-left: 11px;
float: left;
}
#signin-text {
/* margin-top: 100px; */
position: relative;
top: 10px;
left: 8px;
font-weight: 600;
font-size: 13px;
padding-right: 50px;
}
</style>
</head>
<body>
<div id="topbar">
<img id="logo" src="images/BBC_logo.png" alt="logo">
<div id="singin" class="topbar-section">
<img id="signin-img" src="images/signin.png" alt="">
<span id="signin-text"> Sign in</span>
</div>
</div>
-
</body>
</html>
here I am trying to give margin to #signin-text but it's not working ... I used positioning that worked but margin-top didn't can someone please tell me why the margin-top property in #signin-text not working this is my first question of stackoverflow please forgive if the question is asked in a wrong way. :)
span is an inline element. That's why it can't accept margin. If you change this (change its block level) by giving display: inline-block for example, the margin will affect.
span {
margin-top: 15px;
}
.inline-block {
display: inline-block;
}
<div>
<span>natural</span>
</div>
<div>
<span class="inline-block">inline-block</span>
</div>
Since you're using css property top with margin-top it will not work.top always takes precedence over margin-top when using with position property. Check https://www.w3schools.com/Css/css_positioning.asp for reference. Try using top with a value 100px
spans are the inline elements that take margins horizontally only not vertically, Only the block and inline-blocks can take margins as vertically and horizontally.
Margin properties specify the width of the margin area of a box. The
'margin' shorthand property sets the margin for all four sides while
the other margin properties only set their respective side. These
properties apply to all elements, but vertical margins will not have
any effect on non-replaced inline elements.
there are many solutions to your problem, either use div or specify span tag as inline-block in your style tag. Still, there are many other ways to achieve this
I can't seem to get my div to align side by side inside a div, can someone see where the problem is? I am trying to position the divContainer element with a height up to the buttonPanel element and the 2 testDiv elements positioned side by side. I also tried setting the testDiv element with float: left but that didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Test</title>
<style type="text/css">
* {
font-family: tahoma;
font-size: 8pt;
}
#buttonPanel {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: right;
background-color: buttonface;
}
#buttonPanel hr {
margin: 0;
}
#buttonPanel button {
margin: 10px;
width: 75px;
}
#divContainer {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 45px;
border: 2px solid #FFFF00;
}
.testDiv {
display: inline-block;
width: 50%;
height: 100%;
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="divContainer">
<div id="test1" class="testDiv">test1</div>
<div id="test2" class="testDiv">test2</div>
</div>
<div id="buttonPanel">
<hr/>
<button id="btnOK">OK</button>
<button id="btnCancel">Cancel</button>
</div>
</body>
</html>
Let me give you an example:
you have two div left-div say ldiv and right-div say rdiv.These divs are inside main-div say mdiv
ie
<div class = "mdiv">
<div class="ldiv">
</div>
<div class="rdiv">
</div>
</div>
then you css shoul be like this:
#mdiv{}
#ldiv {float:left;}
#rdiv{ float:left;}
Make the following changes to your code: http://jsfiddle.net/ak9Gs/. box-sizing instructs the browser to take padding and borders into account when sizing an element.
CSS:
.testDiv {
width: 50%;
height: 100%;
border: 2px solid blue;
box-sizing: border-box;
}
.testDiv:first-of-type {
float: left;
}
.testDiv:first-of-type {
float: right;
}
You are giving width as 50% and border with 2px that's why your div'a were not placed sise by side. If you remove border you can get your div's as you need.
DEMO
CSS:
.testDiv {
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#ccc;
}
.testDiv:first-child{
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#f0f0f0;
}
I gave color difference instead of border for both test div's.
change the testDiv class to have display of inline then they will be side by side
.testDiv {
display: inline;
width: 50%;
height: 100%;
border: 2px solid blue;
}
Hope this helps.
I'm a newbie when it comes to CSS. My overall goal is to convert a small web application that I have which displays data in table to using CSS.
A description of what the application displays is that in a left hand window there is a list of employee names, on the right is a cell for each day that the employee has worked which spans a user selectable period.
In the code below, I can't get the cell elements to overflow so that the user can scroll to the right, instead the cells are overflowing down.
Is there a way I can get the overflow to work horizontally rather than vertically so I can scroll left and right to see all the cells rather than what it is doing now which is creating a scroll bar vertically?
Much appreciated if anyone can help - it's got me frustrated!
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">Header</div>
<div id="centreposition">
<div id="centrecontent">
<?php
for ($counter = 0; $counter < 100; $counter++)
{
?>
<div id="cell">AB</div>
<?php
}
?>
</div>
</div>
<div id="footer">Footer.</div>
<div id="left">Left <div>
</body>
</html>
CSS:
body {
margin: 0px;
}
#header {
height: 100px;
background-color: #9FF300;
}
#centreposition {
width: 600px;
padding-right: 10px;
padding-left: 10%;
}
#centrecontent {
z-index: 100;
min-width: 1px;
height: 40px;
border: 1px solid #999999;
padding: 4px;
background-color: #FFFF00;
overflow-x: scroll;
}
#footer {
padding-left: 175px;
background-color: #20F3F7;
}
#left {
width: 10%;
position: absolute;
top: 100px;
left: 0px;
padding: 10px 0px 10px 6px;
}
#right {
width: 130px;
position: absolute;
top: 100px;
right: 0px;
height: 200px;
}
#cell {
float: left;
width: 24px;
height: 16px;
margin: 1px;
background-color: #aaccdd;
font-size: 10px;
border-style: solid;
border-left-width: 1px;
border-color: #555555;
}
Two suggestions:
You're essentially asking for a table-based layout, so you may as
well use an HTML table.
Each of your cells has a fixed width, and your PHP code should know
how many of them to create, so you can set the width of the
container element (#centrecontent here) wide enough to contain them
all.
Also, element IDs are supposed to be unique within the HTML doc, so creating 100 elements all with #cell as their ID is incorrect - you should use a CSS class name instead.
You could put all of the cells in another div and set that div to a specific width.
jsfiddle
I want to create a menu that has buttons in it but for some reason the buttons dont get aligned at the buttom of the div. I have done this before the same way using tables and then it worked but now im trying without the tables and for some reason this does not work.
my css:
body
{
background: #bbb url(../images/Mywallpap.jpg) no-repeat;
font-family: Sans-Serif;
padding:0;
margin: 0;
}
#Background
{
width: 750px;
margin: 0 auto;
background: #FEFEFE;
}
.Menu
{
height: 60px;
vertical-align: bottom;
}
.Menu div
{
height : 30px;
margin-left: 25px;
padding: 0;
}
My html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="MyCss.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<div id="Background">
<div class="Menu">
<div>
<button>Test</button>
</div>
</div>
</div>
</body>
</html>
what am i missing here?
Try Using this CSS for button
.ButtonClass
{
border: thin groove #000000;
vertical-align: bottom;
}
And if you are looking for alignment inside div.You can use position:absolute; to absolutely position an element within a parent div.
When using position:absolute; the element will be positioned absolutely from the first positioned parent div, if it can't find one it will position absolutely from the window so you will need to make sure the content div is positioned relatively.
So add position:relative; to the content div, remove the float from the button and add the following css:
position: absolute;
right: 0;
bottom: 0;
Vertical align will work only for table cells1:
.Menu
{
display: table-cell;
}
1 Actually it will also work for inline blocks, but with different effect.
Hopefully the title of my question was clear enough.
Here's a really simple version of my CSS Combo Box. I think I'm just missing something minor and hope you can help with it. Basically I have a container Div, then I have a dropdown Div that holds the floated button on the right. Inside this dropdown Div I also have a Menu Div that is hidden until the user hovers the floated button Div.
I can get it to work by hovering over the dropdown Div since the menu Div is a child of it HOWEVER, I wanted to be able to hover over the button Div which is the first child of dropdown Div and display menu Div, which is the second child of dropdown div and not of button div.
Is there a way to accomplish this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
#container {
position: relative;
background-color: #999999;
height: 31px;
width: 200px;
}
#container #dropdown {
background-color: #999999;
height: 31px;
width: 200px;
}
#container #dropdown #button {
float: right;
background: #555555 url('assets/img/ddw.png') no-repeat center;
height: 25px;
width: 25px;
margin-top: 3px;
margin-right: 3px;
}
#container #dropdown #button:hover #menu {
display: block;
float: right;
background: #555555 url('assets/img/ddw.png') no-repeat center;
height: 25px;
width: 25px;
margin-top: 3px;
margin-right: 3px;
}
#container #dropdown #menu {
display: none;
position: absolute;
background-color: #777777;
top: 32px;
height: 200px;
width: 200px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
</head>
<body>
<div id="container">
<div id="dropdown">
<div id="button"></div>
<div id="menu">
Option 1
<br/>
Option 2
<br/>
Option 3
</div>
</div>
</div>
</body>
</html>
Since #menu comes after #button, you can use the adjacent sibling selector (+) instead of the descendant selector (space):
#container #dropdown #button:hover + #menu {
display: block;
float: right;
background: #555555 url('assets/img/ddw.png') no-repeat center;
height: 25px;
width: 25px;
margin-top: 3px;
margin-right: 3px;
}
Try placing your div#menu inside your div#button. Then, give div#menu the following properties: position: relative, display: block, and top: 25px. Give your button div an overflow: hidden. then, change your #container #dropdown #button:hover #menu selector to #container #dropdown #button:hover, and give it the following properties: width: auto, height: auto, overflow: visible. See this jsFiddle for a working example: http://jsfiddle.net/kzEek/