I have a panel. Which looks like this:
It's not best, but its a copy of things I have in a PSD. The problem is that when you check HTML <a> is before image display and it still make <a> as 0x0px, the problem is with all 3 images in that panel and I don't know how to fix it. Can somebody help me to make each <a> to be as big as that image and button are?
HTML:
<section class="panel">
<img src="images/right_banner.png">
<div class="panel_button"><span class="text">NAHLÁSIT CHEATERA</span></div>
<div class="panel_button"><span class="text">CW/TG REZERVACE</span></div>
</section>
CSS:
.panel {
width: 200px;
float: left;
margin-top: 13px;
}
.panel a {
width: 201px;
height: 200px;
display: inline-block;
}
.panel_button {
background-image: url("images/panel_blue_button.png");
background-repeat: repeat-x;
width: 198px;
height: 93px;
margin-top: 5px;
font-weight: 16px;
}
.panel_button span{
color: #ffffff;
text-align: center;
display: inline-block;
margin-top: 40px;
margin-left: 30px;
}
Live preview
The anchor element is currently an inline element. You could change it to either block or inline-block to achieve the desired results.
.panel > a {
display: block;
}
Related
This is my HTML code:
<img class="centeredimage" src="BLACK.jpg"><br><br>
<p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br>
<span class = "a2017">Welcome to 2017</span><br><br>
<span class="coming_soon">Coming Soon</span></p><br><br>
This is my CSS code:
.centeredimage {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
}
.new{
color:#FFFFFF;
}
.main_text{
font-size:20px;
letter-spacing: 8px;
}
.a2017{
font-size:15px ;
letter-spacing:2px ;
}
.coming_soon{
letter-spacing: 1px;
}
The image is aligned at center of the screen but the text instead of getting displayed after the image is displayed coinciding with the image.How do I make it come after the image so that both are aligned at middle of the screen at center?
Try this
.centeredimage {
display : block;
width: 200px;
margin: auto;
...
I use this code to center things in the middle of the screen, for example, a loader. It can have multiple parts, it doesn't matter. You just put all the parts into one div. I used to use the "margin" trick, and still do here and there, but these days I'm using the table/tablecell thing to get the job done. It works everywhere, phones etc. (note I don't deal with 10-year-old browsers). Below is some code straight from an instructional sample:
<style>
.app_style {
width: 100%;
height: 100%;
display: table;
}
.loader_style {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.loader_icon_style {
border: 2px solid lightgray;
border-radius: 5px 5px 5px 5px;
}
.loader_bar_padding {
padding-top: 10px;
}
.loader_blurb {
width: inherit;
text-align: center;
font-size: 14px;
font-weight: bold;
color: yellow;
font-style: italic;
}
</style>
</head>
<body>
<sample-app class="app_style">
<div class="loader_style">
<img class="loader_icon_style" src="assets/images/r2-d2.jpg" />
<div class="loader_blurb loader_bar_padding">
May the force be with you...
</div>
<img class="loader_bar_padding" src="assets/images/loader-bar.gif" />
</div>
</sample-app>
</body>
If you want center the image and the text, not align only the image otherwise the text follow an other logic on the DOM, mostly if you use the absolute position for the image and not for the text.
You can use a wrapper div aligned to the center and put all content in it.
body {
background-color:#ff00ff;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -100px;
width: 200px;
height: 300px;
}
.your_image {
width: 200px;
height: 200px;
}
.new {
color: #FFFFFF;
}
.main_text {
font-size: 20px;
letter-spacing: 8px;
}
.a2017 {
font-size: 15px;
letter-spacing: 2px;
}
.coming_soon {
letter-spacing: 1px;
}
<div class="wrapper">
<img class="your_image" src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png"><br><br>
<p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br>
<span class="a2017">Welcome to 2017</span><br><br>
<span class="coming_soon">Coming Soon</span></p><br><br>
</div>
I prefer to use Flexbox. It simplifies a lot of the coding you need to do.
In your situation, just wrap your HTMl code in a div and make this your CSS:
div{
display: flex;
flex-direction: column;
justify-content: center;
}
.centeredimage {
display: block;
margin: 0 auto;
width: 200px;
height: 200px;
}
I have a simple inner/outer div problem where it's probably easier to explain through pictures. Here is my issue:
The comment "This is a witty comment." is not breaking down underneath the other 2 labels. Here is my HTML:
<div class="commentOuter">
<div class="commentAuthor">someauthor</div>
<div class="commentDate">17 minutes ago</div>
<div class="commentText"><span>This is a witty comment.</span></div>
</div>
And here's the CSS:
.commentOuter
{
border-radius: 4px;
width: 100%;
height: 20px;
float: left;
background-color: black;
margin-top: 10px;
padding: 5px;
}
.commentAuthor
{
float: left;
font-size: smaller;
color: #68a5d9;
display: block;
height: 15px;
}
.commentDate
{
float: left;
font-size: smaller;
margin-left: 5px;
color: #AAA;
display: block;
height: 15px;
}
.commentText
{
display: block;
width: 100%;
}
I don't understand that when I highlight the element in the dev tools, the div is not showing to be underneath the labels, as seen in this pic:
Any help is much appreciated.
Because you floated the previous 2 elements. If you need to move it below. Use a clear:
.commentText
{
clear:both;
display: block;
width: 100%;
}
You also have to remove the specified height for the .outerComment element.
Just because it's not floated, doesn't mean it won't be next to other elements.
See more here: https://css-tricks.com/all-about-floats/
I have two divs displayed using display: inline-block, in order to have them next to each other. This works when neither of the divs have text in them. However, when I put text in one div, it moves it down dramatically, while the other keeps the same position. This happens regardless of what div I put the text in; if I put it in both, however, only the left div will go down.
Here's a codepen to show what I mean: http://codepen.io/anon/pen/MwEKPp
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#main_container {
width: 1000px;
height: 95%;
margin: 0 auto;
font-size: 0px;
}
#logo {
display: inline-block;
height: 200px;
width: 200px;
background-color: aqua;
font-size: 20px;
}
#title_area {
display: inline-block;
font-size: 20px;
height: 200px;
width: 800px;
background-color: rgb(60,105,123);
font-family: "open sans";
font-size: 60px;
}
<div id="main_container">
<div id="logo_title_area">
<div id="logo">
test
</div>
<div id="title_area">
test
</div>
</div>
</div>
Entering text into the divs labelled logo and title_area will produce the effect I'm talking about.
Does anyone have any idea how to fix this? I need them to remain side-by-side regardless of their contents. Thanks in advance!
It's just missing the vertical alignment, the default value is baseline.
E {
display: inline-block;
vertical-align: top;
}
#logo, #title-area {
vertical-align: top;
}
I just added overflow:auto; for both of the divs and it worked
#logo {
overflow:auto;
display: inline-block;
height: 200px;
width: 200px;
background-color: aqua;
font-size: 20px;
}
#title_area {
overflow:auto;
display: inline-block;
font-size: 20px;
height: 200px;
width: 800px;
background-color: rgb(60,105,123);
font-family: "open sans";
font-size: 60px;
}
I have been trying to align two elements, a h2 and a div side by side without having one of them colapse when the window changes to a smaller size. I've searched the web a bit but found nothing similar that would help and my solutions just wouldn't work so I though here there would be someone able to help me.
So I want it to be displayed like this at all times:
https://imagizer.imageshack.us/v2/912x135q90/631/ZYR7sc.png (Can't post images sorry!)
But when window size changes dispite the fact the div should adapt at some point it just breaks to next line:
https://imagizer.imageshack.us/v2/730x144q90/912/yRBpkc.png
Here is my code on this one:
HTML
<div id='pagetitle'>
<h2 id='subtitle'>Weapons</h2>
<div id='hline'></div>
</div>
CSS
#pagetitle { /* This div is for centering both of the elements. */
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
display: inline-block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
text-align: center;
}
#hline {
display: inline-block;
background-color: #72c9b9;
width: 70%;
height: 1px;
position: relative;
bottom: 4px;
margin-left: 20px;
}
So this is it guys, any sugestions? Thanks in advance.
cs.almeida
Here's a way how to do it:
demo
<div id='pagetitle'>
<h2 id='subtitle'><span>Weapons</span></h2>
</div>
#pagetitle {
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
border-bottom: #72c9b9 solid 2px;
height: 18px;
display: block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
}
#subtitle > span {
background-color: white;
padding: 10px 20px;
}
i should make something like:
But it actualy looks like:
As u can see on images "left" class is moving out of its possition with no reason when i add image or text there, and i am 100% sure that text or image is smaller then width / height of block so i really dont know how to continue and fix this.
My HTML:
<div id="sub-content">
<span class="left">
<img src="images/foto.png">
<span class="topic-name"> Název topicu nebo článku </span>
</span>
<span class="middle"></span>
<span class="right"></span>
</div>
My CSS:
#sub-content{
margin-left: 20px;
margin-top: 0px;
background-image: url("images/sub_content_bg.png");
background-repeat: repeat-x;
height: 145px;
width: 987px;
display:inline-block;
}
#sub-content .left{
width: 326px;
height: 145px;
display: inline-block;
}
#sub-content .left img{
width: 122px;
height: 121px;
display: inline-block;
margin-top: 0px;
margin-left: 5px;
}
#sub-content .left .topic-name{
width: 150px;
margin-bottom: 130px;
margin-left: 10px;
display: inline-block;
vertical-align: top;
text-decoration: underline;
font-weight: 14px;
}
#sub-content .middle{
background-color: orange;
width: 326px;
height: 145px;
display: inline-block;
}
#sub-content .right{
background-color: yellow;
width: 326px;
height: 145px;
display: inline-block;
}
Please can somebody help me to style this or tell me what i am doing wrong?
p.s. Live preview can be also find on: funedit.com/andurit/new/
If you add overflow:hidden to the .left div, it will align correctly.
See: JSFiddle
(I also replaced the inner span with div since div shouldn't occur inside span).
Try to add a position propery to your CSS file. In #sub-content, add position:static;. This should make the elements render in order as they appear in the document.