: What are the best tools/processes for web design refinements / adding polish? I'm working on a particular part of a web page right now and have a mocked-up design to work from. I've always

@Berryessa866

Posted in: #Css #Html #WebsiteDesign

I'm working on a particular part of a web page right now and have a mocked-up design to work from. I've always been able to get everything blocked out in HTML and roughly looking how I like in CSS no problem. It's when I get into the final stretches that I feel I'm constantly fighting CSS to achieve the look I'm aiming for (not even aiming for pixel-perfect or anything like that, I know that's a whole different discussion). Just figuring out how to move some text just so and space the words how I want and get sizing and spacing how I want is taking up so much time. This project in particular is driving me up the wall because making one thing look right messes up the other stuff I've done.

My questions are these: Is there a better way than trial and error in a browser's dev tools to figure this stuff out? Is there a resource for CSS of high-level "You want to do X? Use Y technique" that isn't ad-ridden blog-spam of "17 amazing ways to X"? Are there better tools for this beyond browser dev tools? Or is this struggle just "how it is" and there isn't anything better than to just fiddle around for hours?

Mockup, my attempt, and most relevant HTML + CSS snippets are below



Mockup:



My attempt in HTML+CSS:



HTML:

<div id="result-message">
<p class="content">
<span class="message-row outer before-cost">a used home costs</span>
<span class="message-row cost">
<span class="monthly-cost-delta"><!-- Dynamic content --></span>
<span class="over-under">
<span class="over-line">MORE</span>
<span class="under-line">PER MONTH</span>
</span>
</span>
<span class="message-row outer after-cost">to own than a new home</span>
</p>
</div>


CSS:
#result -message {
float: left;
position: relative;
top: 28.7rem;
left: 25rem;
margin: 0;
padding: 1rem 2rem;
height: auto;


background: white;
border: 6px solid #ECC246 ;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-weight: 900;
}
#result -message .content {
/* margin-top: -1rem; */
color: #DB9F32;
font-size: 29px;
font-weight: 700;
text-align: center;
/* text-shadow: 2px 2px #2EAA60; */
}

#result-message .content .message-row {
width: 272px;
}

#result-message .content .before-cost {
margin-top: -2rem;
margin-bottom: -4rem;
}

#result-message .content .after-cost {
margin-bottom: -7rem;
position: relative;
top: -2rem;
}

#result-message .content .outer.message-row .textFitted {
text-align: justify !important;
width: 100%;
}

#result-message .content .outer.message-row {
display: block;
height: 50px;
text-align: justify;
clear: both;
}

/* For single line justify as described at kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/ */
#result-message .content .outer.message-row:after {
content: "";
display: inline-block;
width: 100%;
}

#result-message .content .cost {
display: block;
color: #347341;
clear: both;
}

#result-message .content .cost .monthly-cost-delta {
float: left;
font-size: 80px;
line-height: 94px;
}

#result-message .content .cost .over-under {
display: block;
}

#result-message .content .cost .over-under .over-line {
font-size: 40px;
display: block;
float: right;
text-align: center;
}

#result-message .content .cost .over-under .under-line {
font-size: 20px;
border-top: 3px solid #347341;
display: block;
float: right;
}

Vote Up Vote Down

Login to post a comment!