Salaam,
I want to make an HTML layout like below:
+----------------------+-----+
| upSide | |
|----------------------| |
| |right|
| |side |
| | |
| mainSide | |
| | |
| | |
+----------------------+-----+
Some thing like this:
<div id="rightSide"></div>
<div id="mainFrame">
<div id="upside"></div>
<div id="mainSide"></div>
</div>
where I want to #upSide be over the #mainSide, in other word when you scrolling the #mainFrame, elements which in the #mainSide be visible at behind the #upSide, when the #upSide's background is transparent(e.g. background-color:rgba(0,0,0,0.35)).
Problem is when I set some things like below:
#upSide{
position:fixed;
width: 80%;
}
#rightSide{
width:20%;
float:right;
position:relative;
}
#mainFrame{
height:100%;
overflow:auto;
}
all things true, but the scrollbar(which in the #mainFrame) goes behind the #upSide.
What's your suggestion for this situation?
The scroll bar goes behind #upSide because of the position:fixed that you added.
Try something like this.
<html>
<head>
<style>
#upSide{
height:200px;
width: 80%;
background:blue;
}
#mainSide{
height:800px;
width: 80%;
background:green;
}
#rightSide{
width:20%;
height:800px;
float:right;
position:relative;
background:red;
}
#mainFrame{
height:800px;
width: 80%;
overflow:auto;
background:yellow;
}
</style>
</head>
<body>
<div id="rightSide"></div>
<div id="mainFrame">
<div id="upside"></div>
<div id="mainSide"></div>
</div>
</body>
Related
I am having a small issue with positioning of a div within my project.
+------------------------+
|+-------+ ~~~~ TITLE| <--how can I stop the text wrapping up the
|| | ~~~~~~~~~~~~~ |\ left hand side here?
|| | ~~~~~~~~~~~~~ | \
|| | ~~~~~~~~~~~~~ | \
|| | ~~~~~~~~~~~~~ | \
|+-------+ ^ | Title Div (class="widgetHeader" in example)
+---------------------|--+
^ |
| \
Thermometer div \
(all good) \
"widgetContent" in example fiddle
However, I wish to force the div's title to stop the content from wrapping around it.
Something like:
+------------------------+
|+-------+ TITLE|
|| | ~~~~~~~~~~~~~ |
|| | ~~~~~~~~~~~~~ |
|| | ~~~~~~~~~~~~~ |
|| | ~~~~~~~~~~~~~ |
|+-------+ ~~~~~ |
+------------------------+
I what I wish to force on each widget.
This is the fiddle.
The two main classes are:
.widgetHeader {
padding-top:5%;
float:right;
margin-right:4px;
font-weight:bold;
text-decoration:underline;
}
.widgetContent {
float:left;
text-align:left;
padding-top:20%;
}
Which is at the end of the CSS in the example.
I know I can solve this easily enough using the <br /> tags within the HTML, but I'm sure it should be easily possible to implement this here.
I think the main problem here is that the Title is right aligned and the content is left aligned.
Any CSS solution (since it will be designed for varying sized screens, I prefer to use %'s instead of px's)?
Fixing the code
Don't float it, instead you can right align it with text-align, like so:
.widgetHeader {
padding-top:5%;
margin-right:4px;
font-weight:bold;
text-align:right;
text-decoration:underline;
}
Here is the updated fiddle
An alternate approach
If I was doing this myself from scratch I would likely do something like this:
.main {
display:block;
width:300px;
border:1px solid #999;
background-color:#EEE;
padding:5px;
}
.image {
float:left;
display:block;
width:120px;
height:120px;
border:1px solid #999;
background-color:#FFF;
}
.content {
display:block;
margin-left:130px;
color:#444;
}
.title {
text-align:right;
font-weight:bold;
}
.clear{
clear:both;
}
<div class="main">
<div class="image"></div>
<div class="content">
<div class="title">Title Here</div>
<p>The rest of the content goes here and will look beautiful and majestic.</p>
<div class="clear"></div>
</div>
</div>
Here is a working example
For class ".widgetHeader" remove property "float: right" and add "text-align: right;". This will solves your problem.
Instead of using float use text-align: right and display: block(to prevent the title to wrap under the thermometer div)
.widgetHeader {
display: block;
text-align: right;
padding-top:5%;
margin-right:4px;
font-weight:bold;
text-decoration:underline;
}
Fiddle here
OR
You can still use float and put a max-width of your title div.
.widgetHeader {
max-width: 150px;
float: right;
padding-top:5%;
margin-right:4px;
font-weight:bold;
text-decoration:underline;
}
Fiddle here
You only have to change one thing (2 if u want to make it a little better looking):
.widgetHeader {
text-align:right; <--- add this
margin-right:4px;
font-weight:bold;
text-decoration:underline;
}
Delete the padding-top.
Fiddle here
I would like to create two divs, one inside the other with equal padding on all sides of the child. Like so
<div>
<div>Foo</div>
</div>
So that the result looks like
----------------------------
| |
| |--------------------| |
| | | | <---- There is 1em padding on the inner
| | Foo | | container too
| | | |
| | | |
| |--------------------| |
| | <---- This is the window height,
---------------------------- the padding is 1em on all sides;
How do I do this in CSS?
Right now I am stuck on this layout, missing the bottom padding
With this code
<div class="more-padded full-height blue-green fixed">
<div class="more-padded full-height light-tan more-rounded light-border">Foo</div>
</div>
and style
.more-padded {
padding: 1em;
}
.full-height {
height: 100%;
}
.blue-green {
background-color: rgba(153, 204, 204, 1);
}
.light-tan {
background-color: rgba(239, 235, 214, 1);
}
.more-rounded {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
You can use box-sizing:border-box; so that the width and height properties include the padding and border
HTML
<div id="parent">
<div id="child">Foo</div>
</div>
CSS
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#parent {
box-sizing:border-box;
height:100%;
padding:1em;
background:hotpink;
}
#child {
height:100%;
background:dodgerblue;
}
Demo
Hi for equal padding use the following code.
Live demo is on http://jsfiddle.net/adarshkr/fqm83gms/5/
html
<div class="outer">
<div class="inner">
<p>Equal padding adarsh</p>
</div>
</div>
css
body{
background:#ddd
}
.outer{
background:#eee;
padding:20px
}
.inner{
background:#000;
padding:20px;
color:#fff
}
.inner a{
color:#fff;
text-decoration:none
}
Ok, now that I am on an actual computer:
I think you want this: (Js Fiddle For Reference)
body,html{
height:100%;width:100%;
}
body{
padding:1em;
}
body >div{
border:1px solid black;
}
I am trying to create 5 links in my web app. The problem is that they need to be all positioned.
they are image links and they are like:
-----
| |
----- | |
| | -----
| | -----
----- | |
----- | |
| | -----
| | -----
----- | |
| |
-----
<a href='#'class='link'><img src='btn1.png'/></a>
<a href='#'class='link'><img src='btn2.png'/></a>
<a href='#'class='link'><img src='btn3.png'/></a>
<a href='#'class='link'><img src='btn4.png'/></a>
<a href='#'class='link'><img src='btn5.png'/></a>
I was wondering what the best way is to do this. Thanks a lot!
the easiest way is using relative container and absolute links,maybe will need responsive modifications it depends of your layout
http://jsfiddle.net/venuK/1/
<p>content before</p>
<div class="absolute-container">
<a href='#'class='link'>img1</a>
<a href='#'class='link'>img2</a>
<a href='#'class='link'>img3</a>
<a href='#'class='link'>img4</a>
<a href='#'class='link'>img5</a>
</div>
<p>content after</p>
.absolute-container{
position:relative;
width:100%;
height:200px;
}
.absolute-container a{
position:absolute;
display:block;
height:60px;
width:50px;
border:1px dotted red;
}
.absolute-container a:nth-child(1){
top:40px;
left:0;
}
.absolute-container a:nth-child(2){
top:0;
left:70px;
}
.absolute-container a:nth-child(3){
top:80px;
left:160px;
}
.absolute-container a:nth-child(4){
top:130px;
left:10px;
}
.absolute-container a:nth-child(5){
top:150px;
left:130px;
}
I'd like to have a two column list of items with square image and two lines of text next to it, nicely aligned
_________ ________
| | | | |
| | Line one h3 tag | | | Line one h3 tag
| | Line two p tag | | | Line two p tag
| | | | |
_________ | __________
Here's my code: http://jsfiddle.net/PEMKs/3/
HTML:
<div class="wrapper">
<div class="right clearfix">
<img src="http://placehold.it/100x100" >
<h4>My name is Markup.</h4><p>I live in Vienna</p>
</div>
<div class="left ">
<img src="http://placehold.it/100x100" >
<h4>My name is Markup.</h4> <p>I live in Vienna</p>
</div>
</div>
CSS:
.wrapper{
width:650px
}
.right{
width:300px;
height:100px;
position:relative;
float:right;
}
.right h4, .right p{
float:right;
margin-right:25px;
font-family:sans-serif;
}
.left{
width:300px;
height:100px;
position:relative;
margin-right:145px;
border-right:1px dashed #cccccc;
}
.left h4, .left p{
float:right;
margin-right:25px;
font-family:sans-serif;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
p{
display:inline-block;
}
How's this work for you?
http://jsfiddle.net/42XUW/
<div class="wrapper">
<div class="right clearfix">
<img src="http://placehold.it/100x100" style="float:left;" >
<h4>My name is Markup.</h4><p>I live in Vienna</p>
</div>
<div class="left ">
<img src="http://placehold.it/100x100" style="float:left;" >
<h4>My name is Markup.</h4> <p>I live in Vienna</p>
</div>
</div>
the style of the image will be set to float:left. It solves your problem.
You can add a CSS style to your image
.left img { float: right;}
I got a tag inside a :
#in .css file
div.box {
width: 50px;
height: 30px;
}
#in .html file
<div class="box">
<p>Here</p>
</div>
and it looks like this:
------------
| |
| Here |
| |
------------
but I want to put <p> at the bottom of <div>, like this:
------------
| |
| |
| Here |
------------
How?
add this
div.box {
width: 50px;
height: 30px;
position:relative;
}
div.box p{
margin:0;
padding:0;
position:absolute;
bottom:0;
}