im trying to learn how to use css instead of tables. i'm starting at the basics with a block of text with same height and width
margin-right: 60%;
margin-left:10px;
margin-top: 10px;
margin-bottom:0;
border:thin;
background-color:#FFF;
font: 9pt "trebuchet ms", arial, sans-serif;
color:#003318;
display:block;
margin-left: 60%;
margin-right:10px;
margin-top: 10px;
border:thin;
background-color:#FFF;
font: 9pt "trebuchet ms", arial, sans-serif;
color:#003318;
display:block;
however, the results are not good. there's no border. how can i fix this?
I recommend the shorthand border property:
border:solid 1px black;
Try cutting the other border properties and just using that and see if that does the job.
More info: http://www.w3schools.com/css/css_border.asp
Tables are like structure groups of layers while divisions are simple layers.
Think that every division is a . The problem is how to structure your divisions. This is where stylesheets come to your rescue.
ex.:
<div class="table">
<div class="right-td"> </div>
<div class="left-td"> </div>
</divd
And in your stylesheet
div.table { width:100%; float:none; margin:0px auto;}
div.right-td { border:1px solid #000;float:rightt; width:45%; padding:6px;}
div.left-td { border:1px solid #000;float:left; width:45%; padding:6px;}
This is just an example
Related
So, in my website, I have some text at the front. I'm trying to put a <hr> 3 pixels under the text, however even when I try to dynamically position it, the <hr> still stays in the same place. Even try positioning it in this JSFiddle:
Text on top of HR line 3px
As you could probably tell, I cannot position it... and at the moment, it kind of looks ugly.
In the full website that I made, I have a <video> html tag, which is playing. It also has a top menu so that you can choose what category of my website you want to choose. Here's a screenshot:
I'm also planning to add a button directly under the <hr>, but I think I should stick to this problem first.
What happens in your current code is that the browser defaults are p {margin: ...some value depending on browser...;}.
So you must first add your own CSS rule to overwrite it, here: #toptext p {margin: 0;}.
Then you can freely choose how to position your <hr> using its margin-top.
Note that, as you have a big font-size for the text, it keeps some space under it, so you may have to use a negative margin for <hr>, like in the example below:
#toptext {
font-family:"Open Sans", san-serif, Arial;
font-size:500%;
color:#000;
text-align:center;
position:absolute;
top:5px;
text-align:center;
left:15%;
}
#toptext p {
margin: 0;
}
#line {
height: .5px;
background-color: #03f;
margin-top: -15px;
}
<div id="toptext">
<p>MatthewTheBottleFlipper</p>
<hr id="line"/>
</div>
Hide the <hr> and try adding the line to the paragraph.
Like this:
#toptext p {
border-bottom: 1px solid red;
line-height: 66px;
}
Then adjust the line-height.
remove all the excess css overkill and lets keep life simple :)
HTML
<p>MatthewTheBottleFlipper</p>
CSS
p {
font-family:"Open Sans", san-serif, Arial;
font-size:500%;
color:#000;
text-align:center;
position:absolute;
top:5px;
text-align:center;
left:15%;
border-bottom:solid 1px #000; /* u need this */
padding-bottom:3px /* ...and this */
}
The p tag naturally has margins and padding. Just remove it, and everything will work how you want:
#toptext {
font-family:"Open Sans", san-serif, Arial;
font-size:500%;
color:#000;
text-align:center;
position:absolute;
top:5px;
text-align:center;
left:15%;
}
#line {
height:0.5px;
background-color:#03f;
margin-top: 3px /* I can't position this three pixels under text */
}
p { padding: 0; margin: 0; }
I am designing a custom table for a website. In dreamweaver, Design tab shows exactly what I want but in Live tab no border and stuff is visible. I have tried to find solution, I might have overlooked something but I couldn't find solution yet. I am posting code here:
CSS
#tableData{
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#09F;
padding-bottom:25px;
padding-top:10px;
border-bottom:thin;
border-bottom-color:#09F;
}
table{
width:600px;
border: 1px solid #666;
}
li{
list-style:none;
height:22px;
border-bottom:1px;
border-bottom-color:#09F;
}
#tableHeading{
font-family:Arial;
font-size:32px;
color:#666;
padding:10px;
float:left;
padding-right:500px;
border-left:thick;
border-right:thick;
border-left-color:#09F;
border-right-color:#09F;
}
HTML
<tr>
<td id="tableData">
<ul>
<li>Android</li>
<li>abced </li>
<li>xyz</li>
</ul>
</td>
</tr>
In Design View:
In Live View (Browser):
What am I doing wrong? How can I solve it?
Regards
replace
border-left:thick;
border-right:thick;
border-left-color:#09F;
border-right-color:#09F;
by
border-left:thick solid #09F;
border-right:thick solid #09F;
Change the CSS for :-
#tableData{
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#09F;
padding-bottom:25px;
padding-top:10px;
border-bottom-style:solid;/*Updated*/
border-bottom-color:#09F;/*Updated*/
}
#tableHeading{
font-family:Arial;
font-size:32px;
color:#666;
padding:10px;
/*float:left;*/
padding-right:500px;
border-left: 5px solid #09F;
border-right: 5px solid #09F;
}
You need to mention complete "border-bottom-style" and "border-bottom-color"
or use this instead "border-bottom:1px solid #09F;"
Please refer this Fiddle: http://jsfiddle.net/aasthatuteja/gDkn6/
Hope this should help!
The dotted border you see in Dreamweaver design view is generated to show you there is an element there, this is indeed not part of your page.
A border in CSS is made up of 3 main components: width, color and style.
The style property is the one you miss.
Change the border styles to:
border-bottom-width: thin;
border-bottom-color: #09F;
border-bottom-style: solid;
You can also use the shorthand for border bottom:
border-bottom: solid thin #09F;
Furthermore I'd advise you to use numerical values for width, like: 1px so you know exactly what you get.
Please see this css code
#ContactForm .wrapper {
min-height:30px;
padding-bottom:8px;
}
#ContactForm .bg {
border:1px solid #aaaaaa;
background-color:#e9e9e9;
float:left;
}
#ContactForm .input {
width:200px;
height:12px;
background:none;
padding:6px 10px 6px 10px;
color:#000;
font:10px Arial, Helvetica, sans-serif;
}
When I test it in browser (firefox) the input block is of some height.. I try reducing the top and bottom padding value from 6 to zero but no avail.
Also reducing height from 12 to lower value does not help.
It is stubborn and fixed to some height. What could be wrong??
I can provide with other data also, if needed.
This is html code
<div class="wrapper"> <strong>Phone:</strong>
<div class="bg">
<input type="text" class="input" >
</div>
</div>
Thanks in advance
i think reducing the height from wrapper will halp.. if not the height must be controlled from some other factor.. check that..
on a look on your code this is the solution..
update us for the same..
#ContactForm .wrapper {
min-height:30px; (CHECK THIS)
padding-bottom:8px;
}
Make sure the form your input is in is has the id "ContactForm"
Remove the space between #ContactForm and .input like the following example
#ContactForm.input {
width:200px;
height:12px;
background:none;
padding:6px 10px 6px 10px;
color:#000;
font:10px Arial, Helvetica, sans-serif;
}
That should work.
I am struggling to see why 1 input element is not dropping to line up withe the label. I have tried various options, but still the same. I have included a grab and the css and would be grateful if someone could show me my error. Thanks
.adduserform {
width:425px;
font:12px Arial, Helvetica, sans-serif;
color:#777;
background-color:#fff;
font-weight:bold;
padding: 10px;
}
.adduserform label {
display:block;
width:110px;
float:left;
font-weight:normal;
font-size:12px;
padding: 0 0 0 30px;
z-index:1000;
clear:both;
}
.adduserform .inputbox {
float:right;
border:1px solid #ccc;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
width:40%;
}
.adduserform textarea {
padding:8px 3px 2px 3px;
margin:2px 0 10px 3px;
border:1px solid #ccc;
}
.adduserform select {
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
outline:none;
clear:right;
}
+++UPDATE HTML+++++
<dl>
<dt>
<label for="AUSR_phone">Phone:</label>
</dt>
<dd>
<input id="AUSR_phone" name="AUSR_phone" type="text" size="32" maxlength="128" value = "" />
</dd>
</dl>
You're floating the input box right, but the top select is not wide enough to force the input onto a second line. The bottom two are being forced down because the area is not wide enough to accommodate both input fields.
You can try putting both your label and input/select inside a div and use float to control positioning within that div:
html:
<div>
<label>text</label>
<input type="text"/>
</div>
css:
label {float:left; width:30%; margin:0 1em; }
input, select {float:left; width:60%; }
div {overflow:hidden; width:100%;}
Put a <div> around each label and input or select combo and style the div with clear: both;. That will force a new line for each div.
little demo: http://jsfiddle.net/6sQw5/4/
edit: the float on the input is not even needed, fixed the demo.
I have a couple of buttons inside a div with a specific width, and I am facing a problem where the buttons are being rendered differently in firefox vs chrome and safari.
In firefox, the buttons are bigger and are messing up my layout.
<div id="sort_by">
<button id="sort_by_price" class="sortButton" value="1">Price</button>
<button id="sort_by_bedrooms" class="sortButton" value="1">Bedrooms</button>
<button id="compareButton" class="sortButton">Compare</button>
</div>
CSS:
button {
display:inline;
float:left;
background-color:orange;
border:1px solid orange;
border-radius:5px;
-moz-border-radius:5px;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:14px;
text-decoration:none;
font-weight:bold;
color:#FFFFFF;
cursor:pointer;
padding:4px 10px 3px 7px;
}
#sort_by {
width:265px;
height:35px;
border-bottom-style:solid;
border-bottom-width:2px;
border-color:#c9c9c9;
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
}
Rendered in firefox:
Rendered in Chrome:
It can be seen that the buttons in firefox are bigger. How can I fix this? Thanks.
Firefox adds an extra margin/padding to button elements that cannot be changed by standard CSS, you can however add the following to make it behave
button::-moz-focus-inner {
border: 0;
padding: 0;
}