...

View Full Version : Help for something simple (CSS)



Jemdt
06-12-2012, 09:46 PM
Hi,

I've got something pretty simple I'd like to fix but I don't know how to. I'm completely new to CSS so I'd be really grateful for help:




<!Doctype HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="TOFILL">
<meta name="keywords" content="RuneVision, 317, private server, Runescape, old, cache, source, client">
</head>

<body>
<div align="center">
<link rel="stylesheet" type="text/css" href="C:\Users\elizabeth\Project\temp\CSS\Body.css">

<img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Top.gif" width="810px">
<br>
<img src="" width="800px" height="90px">
<br>
<img src="http://www.rs-317.net/assets/img/layout/scroll/scroll466Bg.gif" width="800px" height="900px">
<br>
<img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Bottom.gif" width="810px">



Basically, I'd like to know how to join up the images as as you can see, there are white spaces in between (Not caused by the brs), so I'd like to fix them with the center section of scroll being the main background which in between the two scroll heads which when an image is placed on it is not moved to the side and it is simply placed on top of the background.

So basically the same as this but ofc with my own design:

http://th03.deviantart.net/fs49/PRE/i/2009/169/0/7/Runescape_Themed_Web_Design_by_RodsGFX.png

Thanks

Jemdt
06-12-2012, 10:28 PM
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

That's got nothing to do with what I was asking; I didn't ask you to go and copy and paste the definition of CSS from wikipedia, I already know what it is.

bundled
06-12-2012, 11:11 PM
It be nice if I could get a link to your site.

However. To place images on my experiences with spacing/ CSS. You will want to use multiple <divs> within <divs>.

Here is an example from my site.

<div>
</div>
<img src="IMAGE.png" width="26" height="26" /></div>
</form>
<h3 class="mypets">Social </h3>
<div class="thepet">
PET IMAGE
CODING
</div>

Ironically, over time I found the CSS is simply. It's the coding of the actual page that makes everything come together.

I would recommend finding coding from a free CSS template site that uses image background - and learn off that.

Jemdt
06-12-2012, 11:21 PM
It be nice if I could get a link to your site.

However. To place images on my experiences with spacing/ CSS. You will want to use multiple <divs> within <divs>.

Here is an example from my site.

<div>
</div>
<img src="IMAGE.png" width="26" height="26" /></div>
</form>
<h3 class="mypets">Social </h3>
<div class="thepet">
PET IMAGE
CODING
</div>

Ironically, over time I found the CSS is simply. It's the coding of the actual page that makes everything come together.

I would recommend finding coding from a free CSS template site that uses image background - and learn off that.

I haven't uploaded my site yet, but everything is here:

HTML:




<!Doctype HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="TOFILL">
<meta name="keywords" content="RuneVision, 317, private server, Runescape, old, cache, source, client">
</head>

<body>
<div align="center">
<link rel="stylesheet" type="text/css" href="C:\Users\elizabeth\Project\temp\CSS\Body.css">

<img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Top.gif" width="810px" class="scrolltop">
<br>
<img src="" width="800px" height="90px" class="banner">
<br>
<img src="http://www.rs-317.net/assets/img/layout/scroll/scroll466Bg.gif" width="800px" height="900px" class="scroll-enter">
<br>
<img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Bottom.gif" width="810px">



CSS:




body
{
background-color:#F1EDC2;
text-align:center;
font-family:Arial;
font-size:14px;
}
img.scrolltop
{
position: absoloute;
}
img.banner
{
position: absoloute;
}
img.scrollcenter
{
position: absoloute;
}
img.scrollbottom
{
position: absoloute;
}



I still can't get this to work, if you could give me something to work off that would be great :)

bundled
06-13-2012, 12:03 AM
I tried editing it a bit on my site. But here is a start to making the images positioned on the page. It takes a lot of time to get good positioning.

below link is the example i was trying
http://bundlesearch.com/usertest1.html

Body CSS

body
{
background-color:#F1EDC2;
text-align:center;
font-family:Arial;
font-size:14px;
}
img.scrolltop
{
position:absolute;
left:300px;
top:20px;
}
img.banner
{
position:absolute;
left:300px;
top:50px;
}
img.scrollcenter
{
position:absolute;
left:300px;
top:90px;
}
img.scrollbottom
{
position:absolute;
left:300px;
top:100px;
}

You can use absolute positioning. Meaning that (100px) under top would be the px away from top of page. Therefore, one image would be 10px than the other would be 80px. And they would begin to align as set.

You could also you overlapping coding:

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
So edit the left/top positions of the page.

HTML Coding

<!Doctype HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="TOFILL">
<meta name="keywords" content="RuneVision, 317, private server, Runescape, old, cache, source, client">
<title>Untitled Document</title></head>

<body>
<div align="center">
<link rel="stylesheet" type="text/css" href="body.css">

<img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Top.gif" width="810px" height="64" class="scrolltop">
<br>
<img src="" width="800px" height="90px" class="banner">
<br>
<img src="http://www.rs-317.net/assets/img/layout/scroll/scroll466Bg.gif" width="810" height="911" class="scroll-enter">
<br>
<img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Bottom.gif" width="810px">

Jemdt
06-14-2012, 06:18 PM
I tried editing it a bit on my site. But here is a start to making the images positioned on the page. It takes a lot of time to get good positioning.

below link is the example i was trying
http://bundlesearch.com/usertest1.html

Body CSS

body
{
background-color:#F1EDC2;
text-align:center;
font-family:Arial;
font-size:14px;
}
img.scrolltop
{
position:absolute;
left:300px;
top:20px;
}
img.banner
{
position:absolute;
left:300px;
top:50px;
}
img.scrollcenter
{
position:absolute;
left:300px;
top:90px;
}
img.scrollbottom
{
position:absolute;
left:300px;
top:100px;
}

You can use absolute positioning. Meaning that (100px) under top would be the px away from top of page. Therefore, one image would be 10px than the other would be 80px. And they would begin to align as set.

You could also you overlapping coding:

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
So edit the left/top positions of the page.

HTML Coding

<!Doctype HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="TOFILL">
<meta name="keywords" content="RuneVision, 317, private server, Runescape, old, cache, source, client">
<title>Untitled Document</title></head>

<body>
<div align="center">
<link rel="stylesheet" type="text/css" href="body.css">

<img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Top.gif" width="810px" height="64" class="scrolltop">
<br>
<img src="" width="800px" height="90px" class="banner">
<br>
<img src="http://www.rs-317.net/assets/img/layout/scroll/scroll466Bg.gif" width="810" height="911" class="scroll-enter">
<br>
<img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Bottom.gif" width="810px">

Thanks, that sorted everything :)

+1



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum