Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have this site. Since I have float: left in "Instalacion de canalon en Madrid", I expected "2 años" be on the right of "Instalacion de canalon en Madrid" but no, anyone knows why?
.logo-h1 {
float: left;
.logo {
width: 324px;
height: 57px;
a {
width: 324px;
height: 57px;
display: block;
}
}
h1 {
font-size: 17px;
font-family: Verdana, Verdana, Geneva, sans-serif;
width: 491px;
margin-left: 20px;
color: #BC2758;
margin-top: 6px;
}
}
.garantia {
margin: 9px 24px 0 0;
width: 145px;
height: 91px;
}
Float removes the element from the normal HTML flow. When you have multiple elements, you need to give each one a float attribute. In this case, you can also give float:left to your div with class="garantia my-icons-garantia" (2 anos), and it will appear to the right of the first one.
I'm not entirely sure why that is happening, but if you add float: left to "2 anos", it will appear to the right of "Instalacion de cananlon en Madrid"
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last month.
Improve this question
.about-header {
width: 30%;
display: flex;
align-items:center;
background-color: red;
}
.about-header hr{
width: 70px;
border-width: 2px;
margin-left: 0;
}
.about-header h4{
font-size: 30px;
font-weight: 500;
text-transform: capitalize;
background-color: blue;
}
<div class="about-header"> <hr> <h4>Our Services</h4> </div>
no matter what i do i can't align the header next to hr. I tried text-align: left or float left but they didn't work, I used display:flex to keep them aligned, maybe it's because of that
I want to do this
Maybe can work if you use also margin-right: 0;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm trying to tighten the border under the navigation menu. This is the CSS code I have:
CSS:
li.current_page_item a {
border-top: 0;
border-bottom: 3px;
border-style:solid;
line-height: 0;
border-bottom-color:green;
}
My website http://www.verbatimagency.com
Try this:
li.current_page_item a {
border-top: 0;
border-bottom: 2px;
border-style:solid;
line-height: 0;
border-bottom-color:green;
line-height: 0px;
height: 0px;
padding-bottom: 10px;
}
li.current_page_item {
line-height: 0px;
padding-bottom: 0;
height: 0;
}
It was the padding-bottom on the <a> tag. See the corrected preview:
You may need to adjust it accordingly.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I m looking for the best way to write css property code (not class name and organization but inside a css block).
In order to make it more maintainable, efficiency and readable by front-end team but also understandable by back-end team.
For now, i lean on two ways:
Box model convention:
.class {
display: block;
position: absolute;
width: 123px;
margin: 27px;
font-size: 13px;
color: blue;
background: red;
}
Alphabetical:
.class {
background: red;
color: blue;
display: block;
font-size: 13px;
margin: 27px;
position: absolute;
width: 123px;
}
According to you, what is the best solution and why? this or another method.
I follow #mdo's order from his code guide, here.
I find this really easy to understand and very clear especially with the spaces.
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I ran into a problem while designing a layout for my new website.
I want to center my text within a horizontal line, like this using CSS but found no way of doing it:
------- Title -------
Any suggestions ?
See example: http://jsfiddle.net/qm9mk/1/
/* this code is pulled from:
https://gist.github.com/kjantzer/5436097
*/
/* creates a divider line with text
expects <el><span>Title Here</span></el> (where el = h1, h2, etc)
*/
.divider {
position: relative;
color: #999;
}
.divider span {
background: #fff;
position: relative;
padding-right: 10px;
}
.divider > span + span {
padding-right: 0;
padding-left: 10px;
}
.divider.align-right {
text-align: right;
}
.divider.align-right > span { padding-left: 10px; padding-right: 0;}
.divider.align-center {
text-align: center;
}
.divider.align-center > span { padding-left: 10px; padding-right: 10px;}
/* create the dashed line */
.divider:before {
content: '';
position: absolute;
left: 0;
top: 50%;
height: 1px;
width: 100%;
border-top: solid 1px #ccc;
}
.divider.dashed:before {
border-top-style: dashed;
}
This can be achieved with some simple css, I use the border bottom to create the dashed line, and an inline-block span element to cover over it.
http://jsfiddle.net/aqsPb/
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
Can I ask how to change the css of my theme to make the page looks like this http://katiefreiling.com/ this site has its navigation which is purple not extended until the left and right corner. My navigition seems to be extended from left and right corner and my content and footer too. Is it possible to have a style or format similar to the link above? Thanks in advance this is my website http://michelebrunello.com/.
It is better to learn the concepts first and then ask questions. I don't know what picture is in your mid exactly but as per your demo website given i have added few css rules in your css please see the below css rules and try to add in your css.
line 35 white.css
#topmenu {
background: none repeat scroll 0 0 #212983;
border-color: #FFFFFF;
border-style: solid;
border-width: 1px 0;
margin-left: auto;
margin-right: auto;
width: 940px; }
line 11 white.css
#footer-widgets {
background-color: #FAFAFA;
border-top: 1px solid #E6E6E6;
margin-left: auto;
margin-right: auto;
width: 960px; }
line 901 style.css
#footer {
background: url("images/bgr-box-trans.png") repeat-x scroll 0 0 #E4E2DB;
border-top: 1px solid #EEECE6;
font-size: 11px;
height: 32px;
line-height: 22px;
margin-left: auto;
margin-right: auto;
padding: 20px 0; }
Try to implement the css first.