Can't post this on jsfiddle since it seems down.
div.browseBuildsArea-pro
{
float: left;
position: relative;
width: 790px;
height: 90px;
background-image:url('../images/builds/builds-bg-pro.jpg');
background-repeat:no-repeat;
}
div.browseBuildsArea-pro img.champion
{
display: block;
height: 72px;
margin-left: 14px;
margin-top: 7px;
border-radius: 9px;
-moz-border-radius: 9px;
-khtml-border-radius: 9px;
-webkit-border-radius: 9px;
}
div.browseBuildsArea-pro div.build-poster
{
display: block;
position: relative;
margin-left: 150px;
margin-top: 10px;
}
<div class="browseBuildsArea-pro">
<img class="champion" src="<%THEME%>images/lol/avatars/2.png">
<div class="build-poster">
awdwada
</div>
</div>
I'm new to CSS so I need help on two things.
Is there any overuse of attributes in my styling?
"build-poster" div always goes under image. How can I get it on right side of image?
Thanks alot!
You don't need to specify position:relative on <div> since you are not using any left, top, right and bottom properties on those divs. However it's a good idea for older browsers such as IE7.
you need to add float:left to img.champion class
You need to float the image, add:
div.browseBuildsArea-pro img.champion {
float: left;
}
Related
The project is to create a micro-blogging website similar to Twitter. I chose to name the site Chirper (how clever of me). Each post is structured by a parent div, an avatar div and a content div. The avatar and content divs are displayed inline, but they are not aligned properly. Any help is appreciated.
HTML:
<div class="chirp">
<div class="chirp_avatar_region">
<img src="img/avatar/default.png" alt="Avatar" width="64" height="64">
</div>
<div class="chirp_content">
<p>
USER
<span class="timeStamp">2013-11-22 16:43:59</span>
</p>
<p>
COMMENT
</p>
<p>
ReChirp!
</p>
</div>
The div's aren't aligned how I want them to be (level and 100% of the parent).
I can't post images, so here is a link to an imgur page: http://imgur.com/Mn9mE5q
Relevant CSS:
body {
font-family: Verdana, Geneva, sans-serif;
color: #000;
background-color: #666;
font-size: 1em;
}
/* Containers */
div {
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border-style: solid;
border-width: 3px;
border-color: #000;
padding: 10px;
}
div.pane {
width: 70%;
background-color: 0099FF;
}
div.chirp {
border-width: 1px;
margin-bottom: -1px;
width: 80%;
padding: 5px;
}
div.chirp_avatar_region {
display: inline-block;
width: 10%;
height: 100%;
text-align: center;
/*border-style: none;*/
}
div.chirp_content {
display: inline-block;
width: 80%;
height: 100%;
/*border-style: none;*/
}
div.chirp_avatar_region > img, div.chirp_content > p {
margin-top: 0;
vertical-align: middle;
}
You can either float your inner divs then clear the float following the container
or
use vertical-align:top to position your divs at the top of the container
Not entirely sure, but what I think is happening is that by defining position:inline-block, it's putting them on the same line, and making the line-height the height of the chirp_content container. In a sense anyway.
Set to vertical-align:top; and it should solve it.
Ex.
.chirp_content, .chirp_avatar_region{ vertical-align:top; }
JS Fiddle
Give to the avatar_region a float: left, and remove its width: and height: setting. Remove the chirp_content div, it circumvents the inlining.
CSS
div.browseBuildsArea-pro {
float: left;
position: relative;
width: 790px;
height: 90px;
background-image:url('images/builds/builds-bg-pro.jpg');
background-repeat:no-repeat;
}
div.browseBuildsArea-pro img.champion {
float: left;
display: block;
height: 72px;
margin-left: 14px;
margin-top: 7px;
border-radius: 9px;
-moz-border-radius: 9px;
-khtml-border-radius: 9px;
-webkit-border-radius: 9px;
}
div.browseBuildsArea-pro div.build-poster {
float: left;
display: block;
margin-left: 10px;
margin-top: 10px;
}
div.progress-for-build-listing {
float: left;
width: 250px;
margin-left: 400px;
margin-top: 0px;
}
HTML
<div class="browseBuildsArea-pro">
<img class="champion" src="<%THEME%>images/lol/avatars/2.png">
<div class="build-poster">
Test Message
</div>
<div class="progress progress-for-build-listing">
<div class="progress-bar" style="width: 100%;"></div>
</div>
</div>
What I am trying to achieve is basic.
I want "Test Message" content be aligned to the middle of the div automatically. (regardless of the length of string) Also, "progress bar" and additional divs on the right side should also be automatically centered to the middle.
Here is a preview of what I'm looking for.
(Both divs and content inside divs are automatically aligned to the middle.)
Tried several things but none worked. (e.g display: table-cell;)
How can I achieve this? One little example will get me going.
To align text in the middle you need 2 parameters in your CSS.
display:table-cell;
vertical-align:middle;
Also your div is missing a height. you must add that to align it.
for your code it would be :
div.browseBuildsArea-pro div.build-poster {
float: left;
display:table-cell;
vertical-align:middle;
height:72px;
text-align:center; // if you also want it to align in the middle horizontally
margin-left: 10px;
margin-top: 10px;
}
For vertical alignment check out this article:
http://phrogz.net/css/vertical-align/index.html
And utilising what I saw from the above article: http://jsfiddle.net/tf7Cb/
This for the horizontal centering should you require it:
div.browseBuildsArea-pro div.build-poster {
float: left;
display: block;
margin-left: 10px;
margin-top: 10px;
text-align: center;
}
I've tried something, but vertical align doesn't work.
HTML:
<div class="browseBuildsArea-pro">
<img class="champion" src="http://wiki.guildwars.com/images/d/d3/60px-Ranger-tango-icon-200.png">
<div class="build-poster">
<span class="middle-text">
aaaaaaaaaaaa<br>
bbbbbbbbbbbb<br>
ccccccccccccc<br>
dddddddddddd<br>
</span>
</div>
</div>
CSS:
div.browseBuildsArea-pro {
float: left;
position: relative;
width: 790px;
height: 90px;
background-image:url('http://revistaverzus.com/online/background.jpg');
background-repeat:no-repeat;
}
div.browseBuildsArea-pro img.champion {
float: left;
display: block;
height: 72px;
margin-left: 14px;
margin-top: 7px;
border-radius: 9px;
-moz-border-radius: 9px;
-khtml-border-radius: 9px;
-webkit-border-radius: 9px;
}
div.browseBuildsArea-pro div.build-poster {
display: block;
position: relative;
margin-left: 150px;
margin-top: 10px;
}
span.middle-text {
vertical-align: middle;
}
http://jsfiddle.net/sCWfS/1/
How can I make the text align middle regardless of the length of the content?
Try using the following CSS:
div {
text-align: center;
}
Did you try this? http://jsfiddle.net/sCWfS/2/
Instead of span use a DIV with margin: 0 auto?
div.middle-text {
margin: 0 auto;
}
The vertical-align css attribute does not work for divs.
Look at this answer :
Vertical alignment of elements in a div
You need to use display: table on the parent and display: table-cell on the child for vertical-align to work.
Here's a working example: http://jsfiddle.net/sCWfS/3/
div.browseBuildsArea-pro div.build-poster {
display: block;
position: relative;
text-align: center;}
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!
Hi I'm just wondering if anyone can help me out. I'm new enough to web design, and I'm having some problems with my CSS.
Basically I cant figure out how to correctly nest my divs/boxes without having overflow issues! I have tried using overflow: hidden; but this still hasn't worked, I've also tried floating the child elements either left or right to see if it would help but still no luck!
My css looks like this:
#customerReg {
width: 47%;
height: 480px;
float: left;
background: #FFF;
padding: 10px 10px 10px 10px;
display: inline;
margin-top: 10px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
overflow: hidden;
}
#customerInfo {
width: 95%;
height: 120px;
background: #414141;
padding: 10px;
margin-bottom: 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
overflow: hidden;
}
#participantReg {
width: 47%;
height: 480px;
float: right;
background: #FFF;
padding: 10px;
margin-top: 10px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
overflow: hidden;
}
#participantInfo {
width: 95%;
height: 120px;
background: #414141;
padding: 10px;
margin-bottom: 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
overflow: hidden;
}
My HTML Is as follows:
<div class="contentbody" style="border:#FF0066 solid 2px;">
<div id="customerReg" style="border:#33CC00 solid 2px">
<div id="customerInfo">
<p>Customer Registration
</p>
</div>
<!-- End of customerReg --></div>
<div id="participantReg" style="border:#33CC00 solid 2px">
<div id="participantInfo">
<p>Participant Sign Up</p>
<p> </p>
</div>
<!-- End of participantReg --></div>
<!-- end .contentbody --></div>
What im aiming for is so have two rounded boxes side by side with two smaller boxes inside these boxes. I tried to post an image but it wouldnt let me! What im getting is that the two inner boxes are both spilling out on the right side of the outer boxes if that makes sense??
Can anyone tell me where im going wrong and what i can do to correct this as ive spent hours trying to find an answer and cant figure it out!
The parent div set:
overflow: hidden;
OR
#customerReg, #participantReg{
float:left;
}
.contentbody:after{
content: '.';
clear:both;
visibility: hidden;
*zoom:1;
height:0;
display:block;
}
if you set the width of the first div the boxes ar side by side:
look this fiddle
.contentbody{
width:990px;
border:#FF0066 solid 2px;
}