#container {
background-color: #CCC;
height:100px;
}
.clear-fix
{
overflow: hidden;
_height:1%;
}
#navigation {
float: right;
margin-right: 10px;
background-color:Aqua;
}
#content {
float: left;
margin-left: 10px;
background-color:Orange;
}
#content div{display:inline; float:right;}
#content a {float:right; display:inline;margin-right:5px;}
<body style="direction:rtl">
<div id="container" class="clear-fix">
<div id="navigation">hi there ddd ddd</div>
<div id="content">
<div>somthing else</div>
<a target="_blank" href="#" ><img src="anything.jpg" style="width:32px; height:32px"/></a>
<a target="_blank" href="#" ><img src="anything.jpg" style="width:32px; height:32px" /></a>
</div>
</div>
</body>
IE6/7 not show correctly (left-side). i don't want set width for #content do you know any fixer for IE?
if i float inner element of content to left, it is correct (after re arrange of element),
but i want float element to right.
please tell me your solution.
best regards
Not so sure, but from the top of my head... try this
You can add these and see
#container{
width:[your width];
}
#content{
display: inline-block;
}
Related
I want to have two images, left and right halves of the page, that when clicked, re-direct to a particular link.
When the user enters the webpage, I want them to see nothing but these two images (which are clickable), and I don't want it to be scrollable either, i.e. I just want it to fit on the single page.
Not very experienced with HTML - how to modify/rewrite the code below?
<a href="http://www.google.com">
<img src="left_image.png" alt="Go to Google!" >
</a>
<a href="http://www.facebook.com">
<img src="right_image.png" alt="Go to Facebook!" >
</a>
Looking something like this
html,body{
width:100%;
height:100%;
margin:0
}
div.container{
position:relative;
width:100%;
height:100%;
box-sizing:border-box;
}
.left, .right{
width:50%;
height:inherit;
float:left
}
a{
display:block;
width:100%;
height:inherit
}
.left{
background:url(http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
background-size:cover;
}
.right{
background:url(https://pixabay.com/static/uploads/photo/2016/03/28/12/35/cat-1285634_960_720.png);
background-size:cover;
}
<div class="container">
<div class="left">
<a href="www.google.com" ></a>
</div>
<div class="right">
</div>
</div>
The best method I think would be to use a flexbox with viewport units (vh and vw) and use a backround-image with background-size: cover - see demo below:
body{
margin:0;
display:flex;
}
*{
box-sizing:border-box;
}
a {
width:50vw;
height: 100vh;
border:1px solid red;
display:flex;
overflow: hidden;
background-size: cover;
background-position: center;
}
a.left{
background-image: url('http://placehold.it/500x500');
}
a.right{
background-image: url('http://placehold.it/600x600');
}
<a class="left" href="http://www.google.com"></a>
<a class="right" href="http://www.facebook.com"></a>
There is a lot of answers to this so just choose what you like. This is how to work with it in general no matter what goes in the div.
.holder {
width: 100vw;
height: 100vh;
display: flex;
overflow:hidden;
}
.one, .two {
width: 50%;
}
.one {
background: red;
}
.two {
background: green;
}
<div class="holder">
<div class="one"><a href="http://www.google.com">
<img src="left_image.png" alt="Go to Google!" >
</a>
</div>
<div class="two"><a href="http://www.facebook.com">
<img src="right_image.png" alt="Go to Facebook!" >
</a></div>
</div>
____________________________________________________________
| logo_icon page_Tittle |
------------------------------------------------------------
I want to make a header of my phonegap app like this one. On the left of the header there should be a logo(img) and on center there should be page tittle(text). Now I have already try this one.
<div data-role="header" >
<div class="logo" > <img src="img/logo.png" /> </div>
<h1 id="tittle">Main Page</h1>
Exit
</div>
and the css its css is:
.logo {
vertical-align: left;
}
.tittle{
text-align: center;
display: inline-block;
vertical-align: middle;
}
Kindly help me how it will be work? I am new in css.
<div data-role="header" class="header" >
<div class="logo" > <img src="img/logo.png" /> </div>
<h1 id="tittle">Main Page</h1>
Exit
</div>
the css:
.header{display:inline-block;
padding:5px 15px;
text-align:center;
width:100%;
}
.logo{float:left;}
.header h1 {font-size:15px;
width:80%;
text-align:center;}
basically, by adding the text align property of the header div as center, and setting the float property of the logo element to left, should solve your problem
check out the js fiddle link :)
http://jsfiddle.net/Q2Hkj/
This should work for you:
.logo {
float:left;
}
.tittle{
text-align: center;
width:75%; margin:0 auto;
vertical-align: middle;
}
I recommend you to do that with max number of % size and position in your css and use a JavaScript function for center the elements depending of the window size.
Anyway I created a fiddle example for you, take a look and some ideas.
HTML:
<div id="top_bar">
<img id="logo_top_bar" src="../img/logo_top_bar.png">
<section id="title">App title</section>
</div>
CSS:
html,body{
position: relative;
padding: 0px;
margin: 0px;
width: 100%;
max-width: 100%;
height: 100%;
max-width: 100%;
overflow:hidden;
}
#top_bar{
position:relative;
float:left;
height: 60px;
width:100%;
left:0;
top:0;
overflow:hidden;
background-color:rgb(46, 42, 42);
}
#logo_top_bar{
position:absolute;
height:30px;
width:70px;
left:4%;
top:15px;
}
#title{
position:absolute;
left:45%;
top:16px;
font-size: 1.5em;
color:white;
}
I am trying to center the text to a parent element. Here is my code.
HTML
<div class="header"><!--header-->
<span class="child">
<h1 class="h1temp">
<div class="left">Hello</div>
<div class="left down">There</div>
<div class="left downer">James</div>
</h1>
</span>
</div><!--header-->
CSS
.header {
height: 200px;
background-color:#C0C0C0;
position:relative;
}
.child {
position:absolute;
margin:50% auto;
width:900px;
}
.h1temp {
margin:0 auto;
font-size: 20px;
}
The problem is that the text aligns with the browser, not the parent element. Here is what it currently looks like jsFiddle.
I assume you want to align h1temp.
margin: x auto only works if element has width`
.h1temp {
margin:0 auto;
font-size: 20px;
width: 500px;
}
Just write display:table; to .h1temp
I have some divs floating inside another one and I want to align them to the bottom.
This is the HTML:
<div class="magazinebookcase">
<div class="books">
<a title="Mag1" style="height:286px;width:16px;" href="">
</a>
</div>
<div class="books">
<a title="Mag2" style="height:258px;width:48px;" href="">
</a>
</div>
<div class="books">
<a title="Mag3" style="height:252px;width:38px;" href="">
</a>
</div>
<div class="books">
<a title="Mag4" style="height:258px;width:50px;" href="">
</a>
</div>
<div class="books">
<a title="Mag5" style="height:284px;width:14px;" href="">
</a>
</div>
<div class="clearfix"></div>
</div>
And the CSS:
.magazinebookcase {
width: 100%;
padding: 3px;
vertical-align:bottom;
}
.magazinebookcase .clearfix {
clear:both;
}
.magazinebookcase .books {
text-align:center;
float:left;
position: relative;
vertical-align:bottom;
}
.magazinebookcase a {
border: 1px solid #000;
display: block;
word-break: break-all;
}
.magazinebookcase a:hover {
background-color: #ccc;
}
I've tried many ways, changing the positions from absolutes to relatives and other things but I can't do it properly. Any help?
You should not use tables for your layout. But the vertical alignment features are very powerful. You could do something like that:
display: table-cell;
vertical-align: bottom;
I made a jsFiddle that demonstrates how it works.
CSS should be like this:
.left {
display:block;
position:relative;
height:200px;
float:left;
}
.bottom {
position:absolute;
bottom:0;
}
.clear {
clear:both;
}
HTML
<div class="left">
<div class="bottom"></div>
</div>
<div class="left">
</div>
<div class="clear"></div>
Use tables instead. It's my recommendation. On each td use valign:bottom.
I have two divs:
<div id="left_menu" > menu </div>
<div id="content" > centered </div>
Currently they have a css of
#content {
margin-left:auto;
margin-right:auto;
display:table;
}
So this would create a div with menu and a line below that a centered div with centered. What I want is a centered div#content with div#left_menu to the left of it. I DON'T want to center BOTH the divs together, only the div#content. This should be done with only divs and css and should work on all browsers.
So this could possibly look like
---> menu centered <--------
Just to clarify things:
I'm not centering/positioning the text, it's the divs that matter (text is there for marking the position in the example). I want both divs on the same line (like a span, but i want to use divs), the centered div should be centered in the middle of the page. The menu div should be right next to it, touching the left border of the centered div.
This solution should work for every screen size (e.g. if the screen is very large the two side gaps to the left and right of the menu and content should be very large, e.g. if the screen is too small for both the menu and content, there should be no gaps and the result should look like (the >< represent the cutoff) Notice how if the screen is too small, the menu div is fully displayed first with the centered div cutoff (as if it were just two divs floated left).
>menu cent<
Due to the number of incorrect answers being submitted:
1) Please verify your answers by creating your own .html file with your code
2) Refresh once on full screen and refresh once with browser resized to a smaller size such that the browser cannot hold both divs (e.g. the centered div is semi-cutoff)
3) Use inspect element tool(chrome) or equivalent tools to be sure that the two divs are touching, the centered div is indeed centered, etc
To further clarify what i want i've included a better example(NOT a solution though):
This does not work for every screen size:
http://jsfiddle.net/prt38/2/
Updated per requests in comments.
I really like using the vertical-align property when vertically-aligning elements.
HTML:
<div id="container">
<span id="alignment"></span><div id="wrapper">
<div id="sidebar">
</div><div id="main">
</div>
</div>
</div>
Notice how the closing and the succeeding are touching. For inline and inline-block elements to touch, there cannot be space between them in the markup.
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
text-align: center; }
#container { white-space: nowrap; }
#wrapper {
white-space: nowrap;
text-align: left;
margin: 0 75px 0 0;
vertical-align: middle;
display: inline-block; }
#alignment {
height: 100%;
vertical-align: middle;
display: inline-block; }
#sidebar {
background: red;
width: 75px;
height: 200px;
vertical-align: middle;
display: inline-block; }
#main {
background: blue;
width: 300px;
height: 400px;
vertical-align: middle;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/2Xrcm/8/
Your do it with simple overflow:hidden like this:
#left_menu{
float:left;
width:200px;
height:100px;
background:green;
}
#content {
margin-left:auto;
margin-right:auto;
display:table;
height:100px;
background:red;
overflow:hidden;
}
http://jsfiddle.net/hnXqg/
The solution for this is you have to create a wrapper class or id for a div like..
<div id="wrapper">
<div id="left_menu" > menu </div>
<div id="right">
<div id="content" > centered </div>
</div>
</div>
then the css is..
#wrapper{
margin:0px auto;
display:table;
width:90%;
}
#menu{
float:left;
width:300px;
margin:5px;
}
#right{
float:right;
display:block;
}
#content{
displat:table;
margin:0px auto;
}
I think this css should do the job, if I understood your question:
#left_menu{background:red;
width:100px;
height:100px;
float:left;
margin: auto 0;
z-index:2}
#content {
background:white;
width:100px;
height:100px;
margin: auto 0;
float:left;
position:absolute;
left:20%;
z-index:200;
padding-left:4%
}
And Html is below:
<div id="left_menu" >RED DIV</div>
<div id="content" >WHITE DIV</div>
I think this is what you are looking for. Adjust the sizes to suit your needs, obviously.
<style type="text/css">
.container {
margin: auto;
width: 500px;
}
.menu {
margin: 10px;
width: 180px;
}
.content {
margin: 10px;
width: 280px;
text-align: center;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="menu floatLeft">
Menu
</div>
<div class="content floatLeft">
Content
</div>
<div class="clear"></div>
</div>
Edited:
<style type="text/css">
.container {
margin: auto;
width: 500px;;
background: red;
}
.menu {
width: 50px;
margin-left: 50px;
background: green;
}
.content {
width: 300px;
margin: auto;
background: blue;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="menu floatLeft">
Menu
</div>
<div class="content">
Content
</div>
<div class="clear"></div>
</div>
<div align="center">
<span id="left_menu"> menu </span>
<span id="content"> centered </span>
</div>
html { text-align: center; }
div#content { display: inline; margin: 0 auto; text-align: left;width: 980px; }
something like this should work.