This is a really simple question about CSS. I want to get the style depicted in the picture, I tried this code:
#parent {
overflow: hidden;
text-align:center;
}
.navbar {
position:absolute;
top:0px;
right:3px;
}
.logo {
float:left;
}
.table {
float:left;
}
but it doesn't work for me, I get this:
Try:
#parent {
overflow: hidden;
text-align:center;
margin:auto;
width:80%;
}
.navbar {
position:absolute;
top:0px;
right:3px;
}
.logo {
float:left;
}
.table {
float:left;
}
In order to accomplish what you want, you'll need to center your parent divider using margin:auto and placing a fluid width using width:80%.
I'd give your parent element an explicit width, then position from there:
#parent {
width: 960px;
margin: 0 auto;
position: relative;
}
.navbar {
position: absolute;
top: 0;
right: 3px;
}
.logo {
margin-bottom: 20px;
display: inline-block;
}
.table {
width: 100%;
}
I don't know what other contents you have on the page, but your .logo element should appear where you want using default HTML flow. If the table is 100%, it will clear. You should be able to pull this off without floats.
Related
http://ipekevi.com/yeni/ in this page I want head div to above content div. I search here and find many solution but they don't work.
My part of css file about content and head div:
#content {
z-index: 1;
}
#head {
height: 140px;
position: relative;
z-index: 3;
}
I can not figure out. Please explain it.
#content {
z-index: 1;
height:50px;
width:50px;
position:relative;
top:0;
left:0;
}
#head {
height: 140px;
width:960px;
z-index: 999;
position:absolute;
top:0;
left:0;
}
You have to define the position and size,
I hope this helps! :)
Here, in the following code, the text in <p></p> gets displayed below the icon in the div. I want this <p> to appear within the div beside the icon image. Also, I want the <div> tags to be positioned at the bottom of the page.
Here is my code.
<body>
<input type="date">Date</input>
<input type="number">Fs</input>
<input type="number">PtP</input>
<br/><br/>
<div id="add"><img src="iconic\vector\plus_alt.svg"><p>Add</p></div>
<div id="show"><img src="iconic\vector\eye.svg" title="see"><p>Show</p></div>
<div id="showAll"><img src="iconic\vector\list.svg"><p>Show All</p></div>
<div id="delete"><img src="iconic\vector\trash_stroke.svg"><p>Clear All</p></div>
</body>
Here css
#add
{
margin-left:auto;
margin-right:auto;
margin-bottom:0px
}
#add
{
width: 25%;
height: 40px;
float: left;
background-color:#ffcc00;opacity:0.75;
}
#add p
{font-size:15px;
position: inline;
visibility:hidden
}
#add:hover p
{
visibility:visible;
}
#show
{
width: 25%;
height: 40px;
float: left;
background-color:#ffcc00;opacity:0.75;
}
#show p
{font-size:15px;
position: inline;
visibility:hidden
}
#show:hover p
{
visibility:visible;
}
#showAll
{
width: 25%;
height: 40px;
float: left;
background-color:#ffcc00;opacity:0.75;
}
#showAll p
{font-size:15px;
position: inline;
visibility:hidden
}
#showAll:hover p
{
visibility:visible;
}
#delete
{
width: 25%;
height: 40px;
float: right;
background-color:#ffcc00;opacity:0.75;
}
#delete p
{font-size:15px;
position: relative;
visibility:hidden
}
#delete:hover p
{
visibility:visible;
}
Your css code is rather verbose.
I think this is what you're looking for
FIDDLE
div
{
width: 25%;
height: 40px;
float: left;
background-color:#ffcc00;opacity:0.75;
}
p
{
font-size:15px;
display:inline;
visibility:hidden;
}
div:hover p
{
visibility:visible;
}
At first, there is no need to write the same style for each element using its ID. You can simply give them the same class name and style only using class name. The second, I'm suggesting you to use UL tag to make a navigation menu. And finally, you can achieve the effect you want using float property. I've updated your original code and here is the demo in JSFiddle.
P.S. Ask me, if something is not clear for you.
I want to put two divs next to each other but no matter what I do, the second div always ends up somewhere under the first. I have tried:
div.one {
width:50%;
float:left;
}
div.two {
width:50%
float:right;
margin-left:50%;
}
and
div.one {
width:50%;
display:inline-block;
}
div.two {
width:50%;
display:inline-block;
}
From your first example try removing the margin.
div.one {
width:50%;
float:left;
}
div.two {
width:50%
float: left;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
Here is a link to a great tutorial that gives you several examples of positioning: http://www.barelyfitz.com/screencast/html-training/css/positioning
Both should be "float:left;"
The elements have to fit - when there is a border , margin or padding, the "width:50%;" might be too high.
.one {
width: 50%;
float: left;
background: green;
height: 100px;
}
.two {
width: 50%;
float: right;
height: 100px;
background: red;
}
http://jsfiddle.net/qf9GD/
Please look at this http://jsfiddle.net/jaseem/sS7HN/ . What I am trying to achieve is instead of that inner scroll-bar, I want to use the main window scroll bar; SO that I can use the windows vertical scroll bar to go through the content inside the "innerContent" but at the same time I want the outer div to be fixed. is that possible ?
CSS :
header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
}
footer {
position: fixed;
left: 0;
bottom:0;
width: 100%;
}
content {
background-color:#656565;
width: 940px;
margin:0 auto;
padding-top:10px;
border-radius:5px;
}
mainContent {
margin:0px auto;
background-color:#515151;
width:660px;
border-radius:5px;
padding-top:20px;
}
contentHolder {
margin:0 auto;
width:616px;
background-color:#000000;
border-radius:10px;
overflow:auto;
}
HTML :
<div id="header"></div>
<div id="content">
<div id="mainContent">
<div id="contentHolder"></div>
</div>
</div>
<div id="footer"></div>
It's a little unclear what you are trying to accomplish, but I did notice you are missing the hash tags in your CSS. You need # in front of the identifier if you are referring to an ID attribute.
Example: http://jsfiddle.net/hgcax/
CSS
#header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
}
#footer {
position: fixed;
left: 0;
bottom:0;
width: 100%;
}
#content {
background-color:#656565;
width: 940px;
margin:0 auto;
padding-top:10px;
border-radius:5px;
}
#mainContent {
margin:0px auto;
background-color:#515151;
width:660px;
border-radius:5px;
padding-top:20px;
}
#contentHolder {
color:#fff;
margin:0 auto;
width:600px;
height: 400px;
background-color:#000000;
border-radius:10px;
overflow:auto;
}
for div elements you have to give #div name here your div name is contentHolder so its #contentHolder
try like this:
#contentHolder {
overflow:auto;
}
or
#contentHolder {
overflow:scroll;
}
Here is my stylesheet code
#topwrapper {
background: url(images/orangebg.jpg) repeat-x top;
height: 502px;
}
#mainwrapper {
background:url(images/bluebg.jpg) repeat;
}
#maincontent {
margin: 0 auto;
width: 961px;
background-color:#F0EFEF;
position: relative;
margin-top: -312px;
}
I want the maincontent div to move up into the orange div but it is bringing the bluebg.jpg with it (cutting short the orangebg.jpg). When I tried using -top: 312px; instead of the negative margin it added space below the #maincontent.
The code on the page reads
<div id="topwrapper"></div>
<div id="mainwrapper"><div id="maincontent">test test</div></div>
View on jsfiddle
jsfiddle.net/bdh2a - remove the margin-top: -312px; and that is how I need the orange background to look with the grey box on top of it
maybe you can set margin-top: -312px; to mainwrapper div?
Re-arrange your html like this:
<div id="mainwrapper">
<div id="maincontent"><p>text text</p></div>
<div id="topwrapper"></div>
</div>
Then use this CSS setup (adjusting the heights and stuff of course):
#mainwrapper{
height:100%;
background-color:#FF4200;
width:100%;
}
#topwrapper {
background-color:#1B00FF;
height:100px;
min-width:100%;
margin:0 auto;
position:absolute;
top:0;
z-index:0;
}
#maincontent {
margin: 0 auto;
padding:20px;
top:20px;
background-color:#ccc;
position: relative;
color:#000;
z-index:1;
width:80%
}
Check out this jsfiddle:http://jsfiddle.net/imakeitpretty/yqnfk/
There is a lot of greek text in there because you can't see the orange expand without it. "text text" isn't enough to do it.
I Found a solution!!
#topwrapper {
background: url(images/orangebg.jpg) repeat-x top;
height: 502px;
}
#mainwrapper {
background:url(images/bluebg.jpg) repeat;
float: left;
width: 100%;
display: block;
position: relative;
}
#maincontent {
width: 961px;
background-color:#F0EFEF;
position: relative;
margin-top: -312px;
margin-left: -480px;
position: relative;
float: left;
left: 50%;
}
The code on the page stays the same