I'm not sure what the problem is here, but inside of this element there's some deadspace off to the left that doesn't respond to anything I do. I want to center the text inside the element (and it is centered, only there's some void space to the left that doesn't seem to be taken into account). Here's a picture:
You can see how the padding on the left is much greater than the padding on the right. I tried to manually set padding-left but that didn't work.
here's the element in the page (i'm using rails):
<div class="holder round clear eval_body">
...
<div class="box center">
Before continuing to the next student,
<br />please take a moment to review the scores for <%= #student.name %>.
<br />
<span class='strong'>
Once you have submitted them, they cannot be changed!
</span>
</div>
...
</div>
and the box element
.box {
position: relative;
bottom: 3px;
left: 10em;
width: 50%;
height: 8%;
background: #B05C37;
border: 3px solid #902D00;
color: #fff;
}
change your css class to .box center instead of .box
Add
text-align: center;
to your .box in CSS.
thanks for the suggestions (especially techvineet). Got it working with this:
.box {
position: absolute;
bottom: 3.5%;
right: 7%;
margin: 5px;
padding: 20px;
width: 50%;
background: #B05C37;
border: 3px solid #902D00;
color: #fff;
}
Related
My CSS:
.topLogoContainer{
margin-top: 2%;
width: 100%;
height: 20%;
background-color: #660066;
border-radius: 10px;
}
.topLogoText{
width: 50%;
padding: 10px;
}
p.topButton{
text-align: center;
color: white;
}
my HTML:
<div class="topLogoContainer">
<table>
<tr>
<td class="topLogoText">
<font size="18">TB's Jewelry</font>
</td><td>
<a href="buy.php" class="topButton">
<div class="topButton2">
<p class="topButton">buy</p>
</div>
</a>
</td>
</tr>
</table>
</div>
I have a top bar of a website (let's call it "Tbar") (you know, where the logo and navigation buttons go), and I want the main text at the left, vertically center inside Tbar (of course, make it look nice and give it some margin/padding) while making 2 buttons (which are round colored divs that are links) at the very bottom of, in the right inner part of Tbar. I think I need the buttons to be relative, so it will always be inside Tbar. Trying "position: relative; right: 10px; bottom: 0px;" doesn't do what I want - since it doesn't move it to the inner right of Tbar.
Javascript seems ridiculous to use, and I'm not well practiced on it.
Some good practices:
Avoid adding elements like p or div inside your a tag.
This is a simple layout so mixing div with table is not necessary.
Using percentage for your div's height may not work.
Below is a working example. Try changing the height of your .topLogoContainer div to fit with your need.
.topLogoContainer {
margin-top: 2%;
width: 100%;
height: 300px;
background-color: #660066;
border-radius: 10px;
position: relative;
}
.topLogoText {
position: absolute;
left: 10px;
top: calc(50% - 9pt);
color: white;
font-size: 18pt;
padding: 10px;
}
.linkContainer {
position: absolute;
bottom: 10px;
right: 0;
}
.topButton {
margin-right: 10px;
float: right;
text-align: center;
color: white;
}
<div class="topLogoContainer">
<div class="topLogoText">TB's Jewelry</div>
<div class="linkContainer">
something else
buy
</div>
</div>
i want to draw something like this in html.is that possible in html that i can label the rectangle ? i think may be by using <hr> ?
at the moment i have just draw a rectangle
here is the code
<div style="width:150px;height:80px;border:1px solid #000;">This is a rectangle!</div>
how can i draw lines around it and then label it
You can construct the lines and labels with pseudo elements and data attributes using just 2 elements
FIDDLE
Markup:
<div data-label1="a" data-label2="b">
<span data-label3="c">XYZ Pty Ltd</span>
</div>
CSS
div
{
width:150px;
height:80px;
border:1px solid #000;
font-size: 25px;
text-align:center;
margin: 100px;
position: relative;
background: #fff;
}
span
{
padding: 10px 20px;
display: inline-block;
}
div:before, div:after
{
content: attr(data-label1);
position:absolute;
left: -50px;
top: 40px;
width: 50px;
height: 1px;
z-index: -1;
background: #000;
text-align:left;
font-size: 18px;
}
div:after
{
content: attr(data-label2);
right:-50px;
left: auto;
text-align: right;
}
span:after
{
content: attr(data-label3);
position:absolute;
left:0;right:0;
margin: auto;
padding-top:100px;
top:20px;
font-size: 18px;
width: 1px;
height: 0;
z-index: -1;
background: #000;
}
This code will give you the output you want but this is a kind of hard coding.
<div style="display:inline-block; position:relative;top:20px;">a</div>
<div class="hLine" style="width:150px;height:1px;background:#000;display:inline-block;position:relative;top:20px;"></div>
<div style="width:150px;height:80px;border:1px solid #000;display:inline-block;position:relative;left:-5px;">This is a rectangle!</div>
<div class="hLine" style="width:150px;height:1px;background:#000;display:inline-block;position:relative;top:20px;left:-10px;"></div>
<div style="display:inline-block; position:relative;top:20px;">b</div>
<div class="vLine"style="height:40px;width:1px;background:#000;position:relative;left:230px;"></div>
<div style="position:relative;left:230px;">c</div>
For line segments don’t use
<hr>
because its width is dependent on the width of the parent container. So in order to set its width you need to introduce a div to restrict its width. so instead of creating two elements. create the line with just div by keeping its height:0px, and width: desired width. you got your horizontal line segment. If you want a vertical line then keep width zero and height the desired amount.
Hope this helps you out.
You can do using normal HTML and css or using HTML5 Canvas,I am giving you with html and css
http://jsbin.com/IlArOTE/1/edit
I've used Inkscape to create a very simple icon in a site I'm developing. The icon is absolutely positioned over the border of two side-by-side elements.
In Chrome it looks great:-
But in IE7 not so..:-
Am I doing something wrong? There is no transparency in the coloured part of my image, as far as I can tell.
Here's the code I'm using to display the images:-
<div class="roadmapstep">
<div class="roadmapnumber">1</div>
<h4>Header 1</h4>
<div class="nextarrow"><img src="nextarrow.png"></div>
</div>
<div class="roadmapstep">
<div class="roadmapnumber">2</div>
<h4>Header 2</h4>
<div class="nextarrow"><img src="nextarrow.png"></div>
</div>
CSS for the div containing the image is:-
.nextarrow {
position: absolute;
top: 65px;
margin-right: -35px;
right: 0;
width: 65px;
height: 40px;
}
CSS for the divs with the border:
.roadmapstep {
width: 220px;
height: 150px;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
float: left;
position: relative;
}
Use z-index to position an image above another
Add z-index:1000; to .nextarrow
DEMO
Try giving the different class name to second div and position:absolute. it works!!
DEMO 2
I'm having a problem with making one div overlap the rest of the page.
I just need one image to overlap one section. I have kinda got it to work but once you resize the window or look at it on a different resolution the image doesn't appear where it should.
I'm using an position:absolute; and z-index. It is working to some extent. but it won't stay in that position, for example, if you resize your browser window (it moves from where I'd like it to stay).
Here is this website
I need it to overlap the yellow box like this.
Edit: Just a quick follow up: I think your solution has put me a bit of bother. I am unable to place another div directly under it as can be seen here
Move
<div id="medal"><img src="images/star2012medal.png" width="220" height="277"></div>
inside
<div id="box"><img src="images/boxheading.png"></div>
just before the image.
Change the CSS to
#medal {
position: relative;
top: -240px;
right: -80px;
z-index: 50;
}
and apply the following to the boxheading.png image
{
position: relative;
top: -280px;
}
EDIT:
From what I feel you are trying to achieve, you should be looking at a 2-column layout. There's too many good-practice resources online to learn how to do it.
To add another box below the first one, you will need to do the following changes to html:
<div id="box-container">
<div id="box">
<div id="medal">
<img src="images/star2012medal.png" width="220" height="277">
</div>
<img src="images/boxheading.png" width="291px" height="240px" style="position: relative; top: -280px; ">
</div>
<div id="box2">testing</div>
</div>
then add the following css:
#box-container {
float: right;
}
#box {
float: left;
color: #333;
background: #fff;
height: 240px;
width: 291px;
display: inline;
border-style: solid;
border-color: #fff100;
-moz-border-radius: 10px;
border-radius: 10px;
clear: both;
}
#box2 {
float: left;
color: #333;
background: #fff;
height: 240px;
width: 291px;
display: inline-block;
border-style: solid;
border-color: #fff100;
-moz-border-radius: 10px;
border-radius: 10px;
clear: both;
margin-top: 10px;
}
tested only in Chrome. Remember to test it in other browsers!
I have a situation where I have one div of fixed width, containing an image pulled from Twitter, and another div of variable width containing user text of variable length. What I want to achieve is something like the following:
I can do this well enough with a single div that has background-image and padding-left. But I want to be able to apply border-radius to the img element, which simply won't be possible with a background-image.
If I do text-align: center on the outer div, it gets me halfway there. Here's a DEMO and a screenshot:
But this obviously isn't fully what I want.
How can I accomplish this?
Ask and you shall receive — a simplified jsFiddle example:
As an added bonus, the text is vertically centered too!
HTML:
<div class="logo">
<div class="logo-container">
<img src="http://img.tweetimag.es/i/appsumo_b.png" />
</div>
<div class="logo-name">
AppSumo is a really really long title that continues down the page
</div>
</div>
CSS:
.logo {
background-color: #eee;
display: table-cell;
height: 100px;
position: relative;
text-align: center;
vertical-align: middle;
width: 600px;
}
.logo-container {
background-color: #fff;
border-radius: 10px;
left: 10px;
position: absolute;
top: 10px;
width: 75px;
}
.logo-name {
font: bold 28px/115% Helvetica, Arial, sans-serif;
padding-left: 85px;
}
Would it be something like this?
http://jsfiddle.net/uPPTM/6/
.logo {
width:80%;
margin:auto;
background-color: red;
}
.logo-container {
border: 1px solid gold;
width:73px;
height: 73px;
display: inline-block;
vertical-align:middle;
}
.logo-name {
display: inline-block;
}
You can float the image container (or image itself without the container) to the left, clearing anything the left... and then float the text to the left, clearing anything to the right.
.logo-container{
float:left;
clear:left;
}
.logo-name{
float:left;
clear:right;
}
You can adjust the distance of the text using margins.
.logo-name{
float:left;
clear:right;
margin-top:10px;
margin-left:5px;
}
Use absolute positioning with a left position to push the title text past the image.
http://jsfiddle.net/uPPTM/9/
.logo { width: 50px; }
.title {
position: absolute;
top: 0;
left: 50px;
font-size: 32px;
text-align: center;
}
img {
border: 1px solid gray;
border-radius: 15px;
}
<div class="logo">
<div class="logo-container">
<img src="http://img.tweetimag.es/i/appsumo_b.png">
</div>
<div class="logo-name">AppSumo</div>
</div>