• 0

Learning CSS - help?


Question

I've just started trying to learn CSS and ended up here. VERY basic. Anyways.

Using the following code to understand how these #box(es) work, but I'm curious about where to put the text, in this code or somewhere in the body?

#box {
width:300px;
height:120px;
position:absolute;
margin-left:-150px;
margin-top:-60px;
left:50%;
top:50%;
text-align:center;
}

Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0

If you want to center something vertically, just use a table. People will bitch and moan about tables, but in this case its just easier and works in every browser no problem.

As for your question. That code goes in the css section of the html file (or seperate css file) and then

<div id="box">
Blah Blah Blah
</div>

# = id

. = class

Link to comment
Share on other sites

  • 0

Alright, thanks guys. Another question though:

body { color: black; background: white; font:Verdana, Geneva, sans-serif }

Rather than those font options I believe (when in preview / live code) Times New Roman, or something (definitely not what I put in) is being displayed. Reasons?

Link to comment
Share on other sites

  • 0

Alright, thanks guys. Another question though:

body { color: black; background: white; font:Verdana, Geneva, sans-serif }

Rather than those font options I believe (when in preview / live code) Times New Roman, or something (definitely not what I put in) is being displayed. Reasons?

you're looking for the property font-family. also, don't listen to nub about using tables. tables are meant for tabular data. just because you can do something doesn't mean you should.

Link to comment
Share on other sites

  • 0

Alright, thanks guys. Another question though:

body { color: black; background: white; font:Verdana, Geneva, sans-serif }

Rather than those font options I believe (when in preview / live code) Times New Roman, or something (definitely not what I put in) is being displayed. Reasons?

Try this:

body { color: black; background: white; font-family:Verdana, Geneva, sans-serif }

For fonts it's not

font: Verdana

it's

font-family: Verdana

Edit: Bah, nvme beat me to it. But at least I provided the real code fix! :D

Link to comment
Share on other sites

  • 0

you're looking for the property font-family. also, don't listen to nub about using tables. tables are meant for tabular data. just because you can do something doesn't mean you should.

So you'd recommend the 'Div' ? Also, what is this about absolute positioning? I've seen it quite a bit in my google searches but I'm still really really new so I figured I'd wait.

Try this:

body { color: black; background: white; font-family:Verdana, Geneva, sans-serif }

For fonts it's not

font: Verdana

it's

font-family: Verdana

Thank you as well, now with these replies (along with more time spent) I'm getting somewhere.

Link to comment
Share on other sites

  • 0

there's a semicolon missing at the end too.

there's a property called position. by default all elements are position static. when an element is set to something other than position static (relative, absolute, fixed) other properties will then take affect. this includes left, right, top, bottom, and z-index.

if you're using position relative then left, right, top, bottom will be offsets from the elements position as if it were a static element. so the space is still taken up for the relative element but the left, right, top, and bottom will nudge it around in those directions.

if you're using position absolute then it gets a little more interesting. the left, right, top, and bottom properties will offset your position absolute element to the closest parent element that is not static positioned. also, position absolute elements no longer take up the space on the page like they do when they're relative or static.

i'm probably doing a terrible job at explaining this since i can see it all in my head. maybe someone has a good link with pictures.

edit: ah here we go. http://www.barelyfitz.com/screencast/html-training/css/positioning/

Link to comment
Share on other sites

  • 0

Great link, going over it now. I originally started doing this, because of the thread I created not too long ago: Other topic

I want to have two images "attached" to the left & right of the browser window, and scale / adjust properly with browser resizing.

Link to comment
Share on other sites

  • 0

The style definitions go in the <head> section of your HTML document, and between the <style> </style> tags. This is before the actual BODY of the page (which starts after <body> tag).

Like so:

&lt;head&gt;
&lt;title&gt; My Web Page with CSS &lt;/title&gt;

&lt;style type = "text/css"&gt;

#box {
width:300px;
height:120px;
position:absolute;
margin-left:-150px;
margin-top:-60px;
left:50%;
top:50%;
text-align:center;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="box"&gt; Here is some text formatted from the style "box"&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Like that, kinda.

Link to comment
Share on other sites

  • 0

Try this:

body { color: black; background: white; font-family:Verdana, Geneva, sans-serif }

For fonts it's not

font: Verdana

it's

font-family: Verdana

Edit: Bah, nvme beat me to it. But at least I provided the real code fix! :D

well font family can be written in shorthand but you have to specify the font size otherwise it will be ignored.

body {font: 1em verdana;}

That will work.

Link to comment
Share on other sites

  • 0

Finally getting somewhere, still incredibly basic, but hey its like ~2 hours of actual work. EVER. Thought I'd update, screenshot later maybe to show you guys are really being quite helpful along with my own reading. Really enjoying CSS + HTML.

Link to comment
Share on other sites

  • 0

Not CSS related (pretty sure - assuming its a script or something else) but what is it that creates a dim in the background and pops up the image in a slideshow like box such as: wowhead when selecting an image.

Link to comment
Share on other sites

  • 0

Not CSS related (pretty sure - assuming its a script or something else) but what is it that creates a dim in the background and pops up the image in a slideshow like box such as: wowhead when selecting an image.

That's a technique called Lightbox which essentially uses Javascript. You can do some pretty cool stuff with jQuery too.

http://www.huddletogether.com/projects/lightbox2/

Link to comment
Share on other sites

  • 0

I need help again, after some research I still cannot find it. I want to move this over and cannot figure out why the code cant align to the right. Roughly 5px off the border.

hNBnE.jpg

Partial code:


    	&lt;DIV style="width:700px; height:25px; border-style:solid; border-width:thin; background-color:#E3E5E9; display:table-cell; vertical-align:middle"&gt;
               &lt;span class="right"
        	&lt;img src="Alladaskill.png"&gt;
            	&lt;span style="padding-left:700px"&gt;
            	&lt;/span&gt;
            	6015
            	&lt;span style="padding-left:5px"&gt;
            	&lt;/span&gt;&lt;img src="Screen shot 2010-10-20 at 1.13.07 PM.png"&gt;
            &lt;/span&gt;
		&lt;/DIV&gt;	

I'll admit I'm not sure what the span tags do, just was attempting something from a previous attempt. I think that's all the code required.

Link to comment
Share on other sites

  • 0

Some quick tips:

all code should be lower case for your div / in-inline styles. So just:

&lt;div&gt;&lt;/div&gt;

Also, you should recheck your code:

&lt;span class="right"

You're missing a > to that span right there.

Also, is there any particular reason why you're using display: table-cell? I don't see any tabular data so.. not sure why you'd have that set for the display.

The difference between div and span is that divs are for block level elements and span for in-inline elements. So let's say you wanted to change something with a paragraph tag, you would use a span.

&lt;p&gt; The difference between div and span is that divs are for block level elements and span for in-inline elements. &lt;span&gt;So let's say you wanted to change something with a paragraph tag, you would use a span.&lt;/span&gt;&lt;/p&gt;

Where span is you can style it entirely different from the rest of the paragraph. However, do note that if you want to italicize or make it bold, you should just apply <strong> or <em> versus a span to style it.

http://dev.icupcake.org/neowin/skill.html

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Alladaskill&lt;/title&gt;
&lt;style type="text/css"&gt;
body {
	color: #333;
	background: rgb(255,255,255);
	font-face: arial, verdana, tahoma, sans-serif;
	font-size: 100%;
	line-height: 1.7em;
}
.head {
	width: 680px;
	margin: 0 auto;
	padding: 0 0; /* top right bottom left */
	color: #999;
	background: rgb(229, 230, 233);
	border: 1px solid rgb(164, 167, 175);
}
	.gamertag {
		float: left;
		width: 234px;
		height: 35px;
		margin: 20px 0 0 20px;
	}
	.gamerscore {
		float: left;
		margin: 25px 15px 0 75px;
	}
	.avatar {
		float: right;
		margin: 5px 20px 5px 0;
	}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="head clearfix"&gt;
	&lt;img src="https://grab.by/grabs/7278407f0a353e31ca99a630fb4ea6dc.png" class="gamertag"&gt;
	&lt;p class="gamerscore"&gt;6015&lt;/p&gt;
	&lt;img src="https://grab.by/grabs/d1b01fc9ea976d01b1aed44664a774de.png" class="avatar"&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

You can see my example there.

Link to comment
Share on other sites

  • 0

Some quick tips:

all code should be lower case for your div / in-inline styles. So just:

&lt;div&gt;&lt;/div&gt;

Also, you should recheck your code:

&lt;span class="right"

You're missing a > to that span right there.

Also, is there any particular reason why you're using display: table-cell? I don't see any tabular data so.. not sure why you'd have that set for the display.

The difference between div and span is that divs are for block level elements and span for in-inline elements. So let's say you wanted to change something with a paragraph tag, you would use a span.

&lt;p&gt; The difference between div and span is that divs are for block level elements and span for in-inline elements. &lt;span&gt;So let's say you wanted to change something with a paragraph tag, you would use a span.&lt;/span&gt;&lt;/p&gt;

Where span is you can style it entirely different from the rest of the paragraph. However, do note that if you want to italicize or make it bold, you should just apply <strong> or <em> versus a span to style it.

http://dev.icupcake.org/neowin/skill.html

Thanks for lowercase comment, also the > is there.

display: table-cell

is what I found online to work with

vertical-align:middle

, needed both to make it look / fit right. Going to see what happens when I add your code to mine. As for your example, that's where I want the picture, but the number next to it, or possibly code that updates ONLY the # of gamerscore, nothing else.

Also, i actually like how its the "Alladaskill" image above the avatar and text where it is, just all moved over to the right.

hNBnE.jpg

Link to comment
Share on other sites

  • 0

BUMP

Add

float:right;

to any elements you want aligned to the right.

Its easier not to have styles in your html as well as it makes it confusing for when you have large amounts of code that you want to change.

give your divs an id or class and assign the styles to them in the head or in a seperate style sheet.

 
&lt;head&gt;
&lt;style type="text/css"&gt;
#divex{
width:700px; 
height:25px; 
border-style:solid; 
border-width:thin; 
background-color:#E3E5E9;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div class="divex"&gt;&lt;!-- Start of the .divex --&gt;
               &lt;span class="right"&gt;
        	&lt;img src="Alladaskill.png"&gt;
            	&lt;span style="padding-left:700px"&gt;
            	&lt;/span&gt;
            	6015
            	&lt;span style="padding-left:5px"&gt;
            	&lt;/span&gt;&lt;img src="Screen shot 2010-10-20 at 1.13.07 PM.png"&gt;
            &lt;/span&gt;
	&lt;/div&gt;&lt;!-- End of the .divex --&gt;
&lt;/body&gt;

Link to comment
Share on other sites

  • 0

BUMP

Why did you bump when I gave you what you needed with my post + code example? All you need to do is edit it yourself to get it how you want.

Edit the code for:

Wrap the three items in a new div (.xbox).

    .xbox {
        float: right;
    }

Change .gamertag's float: left to display: block and margin top 20px to just 5px.

http://dev.icupcake.org/neowin/skill.html

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.