CSS help
www.bristolequestrianservices.co.uk
I am trying to put my contact details below my facebook icon. I have large gaps, how do I get them so they each line stacks nicely. I am most probably doing it wrong anyway but can you please help.
I have included my code.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/timothy.js"></script>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/print.css" rel="stylesheet" type="text/css" media="print">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="cache" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="keywords" content="Enter Keywords" />
<meta name="description" content="Description Here" />
<title>Bristol Equestrian Services</title>
<!-- Google Analytics Code Goes Below Here -->
<!-- End Google Analytics Code -->
</head>
<body>
<div id="outer">
<div id="wrapper">
<div id="logo">
<img src="images/banner1.jpg" />
</div>
<div id="social-media-icons">
<ul>
<li><a href="https://www.facebook.com/groups/150449201771804/"><img src="images/icons/facebook.jpg" /></a></li>
<li><a href="£"><img src="images/icons/rss.jpg" /></a></li>
<li><a href="http://www.twitter.com"><img src="images/icons/twitter.jpg" /></a></li>
<li><img src="images/icons/youtube.jpg" /></li>
</ul>
</div>
<div id="contact">
<p> Tel: 0117 9190060 / 07900538697</p>
<p> [Removed personal information] </p>
<p> [Removed personal information] </p>
</div>
<div id="topnav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="stablesandfieldshelters.html">Stable and Field Shelters</a></li>
<li><a href="pricelist.html">Price List</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<div id="banner">
<img src="images/newbanner.jpg" />
</div>
<div id="content">
<h1>Welcome to Bristol Equestrian Services</h1>
<p>We have been making portable timber buildings for 35 years so we do know what is best to use so if you want a building to last and to be guaranteed, you have come to the right place. We offer 15years guarantee against rot and the building structure</p>
<img src="images/Photos/1.jpg" />
<img src="images/photo/3.jpg" />
<p>We know there is a lot of rubbish out there and you don't want to spend a lot of money on something that will only last a couple of years...We are that confident in the quality of our stables/shelters that when we deliver your shelter/stable if you are unhappy with the quality we will take it back at no cost to you!</p>
</div>
<div id="rightside">
<h2>Latest News</h2>
<p><a href="newpictures.html">New Pictures Added</a></p>
<p><a href="newtestimonials.html">New Testimonials</a></p>
<p><a href="viewgallery.html">View Gallery</a></p>
</div>
<div id="footer">
<p class="footer-text">Copyright 2014 Bristol Equestrian Services</p>
</div>
</div>
</div>
</body>
</html>
css
/* Color Legend */
/* Reset */
html, body { margin: 0; padding: 0; border: 0;
background: transparent; font-size:10px; }
div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li,
table, tr, th, td, tbody, tfoot, thead {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
img { margin:0; padding:0; border:0; }
table, tr, th, td, tbody, tfoot, thead {
margin: 0; padding: 0; border: 0;
vertical-align: baseline;
background: transparent;
table { border-collapse: collapse; border-spacing: 0; }
input, select, textarea, form, fieldset {
margin: 0; padding: 0; border: 0;
article, aside, dialog, figure, footer, header, hgroup, nav, section {
display:block; }
h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike {
font-family: Arial, Helvetica, sans-serif;
font-size:100%;
font-weight: normal;
font-style: normal;
line-height: 100%;
text-indent: 0;
text-decoration: none;
text-align: left;
color: #000;
ol, ul { list-style: none; }
/* Global */
html { }
body { background: #7A7D42 }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
h1 { font-size:24px; color:#BB5E00;
padding-bottom:15px; border-bottom:1px #ccc solid; margin-bottom:15px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }
/* Text Elements */
p { color:#000; font-size:12px; line-height:150%;
margin:15px; 0; }
p .left { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right { margin: 1.5em 0 1.5em 1.5em; padding: 0; }
a { }
a:link { color: #00f; }
a:visited { color: #0f0; }
a:active { color: #000; }
a:focus { color: #666; }
a:hover { color: #f00; }
blockquote { color:#000; font-size:12px; }
strong { font-weight: bold; }
em { font-style: italic; }
/* Images */
/* Lists */
ul { }
ol { list-style-type:decimal; }
ul li { color:#000; font-size:12px; }
ol li { color:#000; font-size:12px; }
dl { }
dt { }
dd { }
/* Tables */
table { width:100%; }
tr { }
.odd { background-color:#eee; }
.even { background-color:#fff; }
th { font-weight: bold; }
thead, th { background: #ccc; }
tbody { }
th,td,caption { }
caption { }
tfoot { }
.tfooter { background-color:#ccc; text-align:center; font-style:italic; }
caption { background: #efefef; }
/* Miscellaneous */
sup, sub { line-height: 0; }
abbr, acronym { border-bottom: 1px dotted #666; }
address { }
del { background:#FFCECE; color:#f00; }
code, pre { background-color:#FF9; padding:2px 0px; margin:4px 25px;
font-family:"Courier New", Courier, monospace; font-size:12px; font-weight:normal; line-height:150%; }
/* Containers */
#outer { width:960px; margin:0 auto; background:#FFF; }
#wrapper { width:900px; margin:0 auto; background:#FFF; }
#logo { margin: 30px 0; float:left; }
#social-media-icons { float:right; }
#social-media-icons ul li {display:inline; }
#social-media-icons ul {margin-top:40px; }
#topnav { clear:both; }
#topnav ul { border-top:1px #000 solid; border-bottom:1px #000 solid;
margin:20px 0; padding:10px 0; }
#topnav ul li { display:inline; }
#topnav ul li a { padding:0 15px; }
#topnav a:link { color: #000; }
#topnav a:visited { color: #000; }
#topnav a:active { color: #000; }
#topnav a:focus { color: #666; }
#topnav a:hover { color: #f90; }
#banner { margin-bottom:30px; }
#rightside { width:200px; float:right }
#content { width:650px; float:left; }
#footer { clear:both; margin-top:20px 0; border-top:1px #ccc solid;
padding-bottom:20px; }
#box1 { }
#box2 { }
#box3 { }
#box4 { }
#box5 { }
#box6 { }
/* Layout Extra */
/* Navigation Extra */
/* Forms */
form ol { list-style-type:none; }
form { text-align:left; margin:20px; }
label {
float: left; width: 150px; margin-top:5px;
text-align:right; display:block; background:none; font-weight:bold;
submit { background:none; }
input {
width: 280px; margin:0 0 16px 10px;
border:1px #bbb solid; padding:5px; background:none;
input:focus, textarea:focus { background-color:#BFEBFF; }
textarea {
width: 280px; height: 150px; margin:0 0 16px 10px;
border:1px #bbb solid; padding:5px; background:none;
select { margin-bottom:20px; }
.month { margin-left:155px; }
.submit {
width:90px; height:25px;
margin-left:160px;
font-size:12px;
br { clear: left; }
.clear { clear:both; }
/* Miscellaneous */
.copyright-text { font-size:80%; font-style:italic; color:#333; }
.footer-text { font-size:100%; font-style:normal; color:#000; text-align:center; }
.title { font-size:18px; font-weight:bold; color:#333; }
.subtitle { font-size:14px; font-style:italic; color:#333; }
.artist { font-size:16px; font-weight:bold; color:#333; }
.author { font-size:14px font-weight:bold; color:#555; }
.editor { font-size:14px font-style:italic; color:#555; }
.pub-date { font-size:10px font-style:italic; color:#555; }
.article-date { font-size:10px font-style:italic; color:#555; }
.location { font-size:10px font-style:italic; color:#555; }
.float-right { float:right; }
.float-left { float:left; }
.clear { clear:both; }
.hide { display:none; }
.block { display:block; }
.inline { display:inline; }
.first { font-weight:bold; }
.last { font-weight:bold; }
.left { font-weight:bold; text-align:left; }
.right { font-weight:bold; text-align:right; }
.added { background:#D7D7FF; }
.removed { background:#FFCECE; color:#f00; }
.changed { background:#FFB; }
/* Success, info, notice and error/alert boxes - from Blueprint CSS Framework */
.error, .alert, .notice, .success, .info {
padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; }
.error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
.notice { background: #fff6bf; color: #514721; border-color: #ffd324; }
.success { background: #e6efc2; color: #264409; border-color: #c6d880; }
.info { background: #d5edf8; color: #205791; border-color: #92cae4; }
.error a { color: #8a1f11; }
.alert a { color: #8a1f11; }
.notice a { color: #514721; }
.success a { color: #264409; }
.info a { color: #205791; }
#contact {
float: right;
clear: both;
Message was edited by: sinious
You should have more joy with the below css. (make a back-up of your page/css just incase you want to revert to the original)
#logo {
padding: 40px 0 0 0;
float:left;
width: 200px; /* set to width of logo image */
#social-media-icons {
width: 250px;
float: right;
padding: 0;
#social-media-icons li {
display:inline;
margin: 0;
padding: 0;
list-style: none;
#social-media-icons ul {
margin: 40px 0 0 0;
padding: 0;
#contact {
float: right;
clear: both;
width: 250px;
#contact p {
margin: 0;
padding: 12px 0 25px 0;
You only need one paragraph for the contact details, use <br> as below:
<p>Tel: 0117 9190060 / 07900538697<br>
Email: lisa@xxxxxxxxxxxxxxxx<br>
sales@xxxxxxxxxxxxxxxxxxxxx</p>
Message was edited by: sinious
Similar Messages
-
I'm really hoping someone can help with this.
I have a couple of SSI's on a site I'm developing. They are
text only .html files that have links on them to other pages where
you can get more info.
My problem is that the page properties for my index.php page
override the CSS that I've created for the SSI's. I want the SSI
text to have it's own look, separate from what the look of the
index.php page is. Is this an easy fix or more major development.
I'm pretty new at all of this so talk to me like a child.
Thanks in advance for your help.Put the CSS for the includes into the parent files. The
include files
should contain NO CSS.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"graphxguy777" <[email protected]> wrote in
message
news:eertmi$avr$[email protected]..
> I'm really hoping someone can help with this.
>
> I have a couple of SSI's on a site I'm developing. They
are text only
> .html
> files that have links on them to other pages where you
can get more info.
>
> My problem is that the page properties for my index.php
page override the
> CSS
> that I've created for the SSI's. I want the SSI text to
have it's own
> look,
> separate from what the look of the index.php page is. Is
this an easy fix
> or
> more major development. I'm pretty new at all of this so
talk to me like a
> child.
>
> Thanks in advance for your help.
>
>
> -
This is a multi-part message in MIME format.
------=_NextPart_000_0008_01C6AB1B.755FB0F0
Content-Type: text/plain;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
Yes I want to use css for this.
I have an xml doc being pulled into my flash. Text is fine
except =
wherever I try to assign a style. It's also defaulting to the
black =
color in flash (I couldn't find a way not to select a color
or style in =
flash for the font) instead of the blue specified in the css
doc. In =
that first image/description, it cuts off at the <em>
tag.
Please help me understand what I'm doing wrong.
XML doc:
<?xml version=3D"1.0" encoding=3D"utf-8"
standalone=3D"yes"?>
<?xml-stylesheet type=3D"text/css"
href=3D"xmlstyles.css"?>
<!DOCTYPE images [
<!ELEMENT images (#PCDATA)*>
<!ELEMENT pic (image, thumbnails, caption, desc)>
<!ELEMENT image (#PCDATA)*>
<!ELEMENT thumbnails (#PCDATA)*>
<!ELEMENT caption (#PCDATA)*>
<!ELEMENT desc (#PCDATA)*>
]>
<images>
<pic>
<image>images/0.jpg</image>
<thumbnails>images/thumbs/wickham.swf</thumbnails>
<caption>An Inspired Beginning</caption>
<desc>Edward Virginius Valentine was born in Richmond
in 1838. A visit =
to the 1853 New York World's Fair with his father inspired
him to become =
an artist. Valentine studied in Paris and Italy from 1859 to
1861. He =
was granted permission to study under Berlin sculptor August
Kiss, =
<em>who had created the piece that first ignited
Valentine's artistic =
inspiration, Amazon Attacked by a Tiger.</em> In the
spring of 1865, the =
deaths of both Kiss and his father, Mann Valentine, led him
to return to =
his home in Richmond, Virginia.
</desc>
</pic>
etc., etc., ...
CSS doc: (xmlstyles.css)
em {
font-style: italic;
para {=20
font-size: 12px;
desc {
font-size: 12px;
color: #0000CC;
------=_NextPart_000_0008_01C6AB1B.755FB0F0
Content-Type: text/html;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML><HEAD>
<META http-equiv=3DContent-Type content=3D"text/html; =
charset=3Diso-8859-1">
<META content=3D"MSHTML 6.00.2900.2912"
name=3DGENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY>
<DIV><FONT face=3DArial size=3D2>Yes I want to
use css for =
this.</FONT></DIV>
<DIV><FONT face=3DArial size=3D2>I have an xml
doc being pulled into my =
flash. Text=20
is fine except wherever I try to assign a style. It's also
defaulting to =
the black color in flash (I couldn't find a
way <EM>not</EM> =
to=20
select a color or style in flash for the
font) instead of the =
blue=20
specified in the css doc. In that first image/description, it
cuts off =
at the=20
<em> tag.</FONT></DIV>
<DIV><FONT face=3DArial size=3D2>Please help me
understand what I'm =
doing=20
wrong.</FONT></DIV>
<DIV><FONT face=3DArial
size=3D2></FONT> </DIV>
<DIV><FONT face=3DArial
size=3D2></FONT> </DIV>
<DIV><FONT face=3DArial
size=3D2><STRONG>XML
doc:</STRONG></FONT></DIV>
<DIV><FONT face=3DArial size=3D2><?xml
version=3D"1.0" =
encoding=3D"utf-8"=20
standalone=3D"yes"?><BR><?xml-stylesheet
type=3D"text/css"=20
href=3D"xmlstyles.css"?><BR><!DOCTYPE
images =
[<BR> <!ELEMENT images=20
(#PCDATA)*><BR>
<!ELEMENT pic (image, thumbnails, =
caption,=20
desc)><BR> <!ELEMENT
image =
(#PCDATA)*><BR> =20
<!ELEMENT thumbnails
(#PCDATA)*><BR> <!ELEMENT =
caption=20
(#PCDATA)*><BR>
<!ELEMENT desc=20
(#PCDATA)*><BR> ]><BR><images><BR> =20
<pic><BR> =20
<image>images/0.jpg</image><BR> <thumbnails>=
images/thumbs/wickham.swf</thumbnails><BR> &=
nbsp; =20
<caption>An Inspired=20
Beginning</caption><BR> <desc>Edward
Virginius =
Valentine=20
was born in Richmond in 1838. A visit to the 1853 New York
World's Fair =
with his=20
father inspired him to become an artist. Valentine studied in
Paris and =
Italy=20
from 1859 to 1861. He was granted permission to study under
Berlin =
sculptor=20
August Kiss, <em>who had created the piece that
first ignited =
Valentine=92s=20
artistic inspiration, Amazon Attacked by a
Tiger.</em> In the =
spring of=20
1865, the deaths of both Kiss and his father, Mann Valentine,
led him to =
return=20
to his home in Richmond,=20
Virginia.<BR> </desc><BR> =20
</pic></FONT></DIV>
<DIV><FONT face=3DArial size=3D2>etc., etc.,
...</FONT></DIV>
<DIV><FONT face=3DArial
size=3D2></FONT> </DIV>
<DIV><FONT face=3DArial
size=3D2><STRONG>CSS doc:=20
(xmlstyles.css)</STRONG></FONT></DIV>
<DIV><FONT face=3DArial size=3D2>em
{<BR> font-style: =
italic;<BR>}<BR>para {=20
<BR> font-size: 12px;<BR>}<BR>desc
{<BR> font-size:=20
12px;<BR> color:
#0000CC;<BR>}</FONT></DIV></BODY></HTML>
------=_NextPart_000_0008_01C6AB1B.755FB0F0--Thank you! I will check it out.
Raymond Basque" <[email protected]> wrote
in message
news:[email protected]...
>
>
> You need to load the stylesheet using a
TextField.StyleSheet object and
> then
> assign it to the TextField. There are examples in the
Help documents.
>
>
>
>
> "Dirk" <[email protected]> wrote in
message
> news:[email protected]...
> Yes I want to use css for this.
> I have an xml doc being pulled into my flash. Text is
fine except wherever
> I
> try to assign a style. It's also defaulting to the black
color in flash (I
> couldn't find a way not to select a color or style in
flash for the font)
> instead of the blue specified in the css doc. In that
first
> image/description, it cuts off at the <em> tag.
> Please help me understand what I'm doing wrong.
>
>
> XML doc:
> <?xml version="1.0" encoding="utf-8"
standalone="yes"?>
> <?xml-stylesheet type="text/css"
href="xmlstyles.css"?>
> <!DOCTYPE images [
> <!ELEMENT images (#PCDATA)*>
> <!ELEMENT pic (image, thumbnails, caption, desc)>
> <!ELEMENT image (#PCDATA)*>
> <!ELEMENT thumbnails (#PCDATA)*>
> <!ELEMENT caption (#PCDATA)*>
> <!ELEMENT desc (#PCDATA)*>
> ]>
> <images>
> <pic>
> <image>images/0.jpg</image>
>
<thumbnails>images/thumbs/wickham.swf</thumbnails>
> <caption>An Inspired Beginning</caption>
> <desc>Edward Virginius Valentine was born in
Richmond in 1838. A visit to
> the 1853 New York World's Fair with his father inspired
him to become an
> artist. Valentine studied in Paris and Italy from 1859
to 1861. He was
> granted permission to study under Berlin sculptor August
Kiss, <em>who had
> created the piece that first ignited Valentine's
artistic inspiration,
> Amazon Attacked by a Tiger.</em> In the spring of
1865, the deaths of both
> Kiss and his father, Mann Valentine, led him to return
to his home in
> Richmond, Virginia.
> </desc>
> </pic>
> etc., etc., ...
>
> CSS doc: (xmlstyles.css)
> em {
> font-style: italic;
> }
> para {
> font-size: 12px;
> }
> desc {
> font-size: 12px;
> color: #0000CC;
> }
>
> -
CSS help? Adding a heading banner, how?
Hi folks, I was wondering if anyone here on this forum would both have the skill, the time and the kindness to offer help with a CSS tweak? I am using the LR HTML standard output. I want to place in a heading image I already use on my site. I was trying changes in the CSS files that LR gernerated last night. Took a copy of my sites CSS off the site and was doing my best to compare, trial and error tests.
I Was able to see how to change cell background colors and even page background colors. Of course I can figure out eventually how to shift from LRs 3 column minimum to my own 2 column design - or not fight that battle at all. But I am not sure how to tell the LR CSS to put the same image as heading background in the LR web page, as I have in my own.
Can anyone who actually knows how to do this, do this for me? I ask only to get a start. IF you generate a 3 x 3 table and then edit your content/custom.css page, that should be where you find the data to change. That is where I have been testing and it seems to work there.
But what I wold appreciate would be to see an example of just replacing ... However far you have to go down from the top to replace ... With a banner of some kind placed so that your banner would be background at the top of the page when done. If I had that I could see how it works and substitute my sites current header background.
The spacing on my pages come down just past the top line where the menus cross the page, about an inch. The best of all worlds would be to take out everything above where the LR output table starts and put in my own site title and banner. But I am really not good at tweaks in CSS yet. So a starting reference point would be sooo helpful. You know, When you are not sure what section to rip apart and what damage you are doing to some other place that needed that bit of coding?
ANyway, thanks very much if anyone can help. Appreciate it.
LevelbestNot sure why your posts are coming in multiple lots - your last message came in three times.
Onto your colour problem. this is a personal opinion of course, but currently, the burgandy text behind the green in your header is very difficult to read. The added white dropshadow doesn't enhance the text, only makes it hard to read.
I would possibly make the header box white so that your logo and tagline stand out a lot more than they do. I would use the green/burgandy combination only as accents in your layout. Maybe a burgandy navigation bar, and use a solid green for the footer with which text. I would likely thrown in some blue or grey, both mix well with burgandy :-)
You may get more ideas for colourschemes from this site: http://www.colourlovers.com/palettes/top
Nadia
Adobe® Community Expert : Dreamweaver
Unique CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
Book: Ultimate CSS Reference
http://www.sitepoint.com/launch/005dfd4/3/133
http://twitter.com/nadiap -
Servlet and CSS help!!
Hi everyone!
This may be the simpliest thing to most of you but I'm just wondering if anyone can give me a little help on how i can call and use a CSS in a servlet...
Here's what i tried:
out.println("<link rel=\"alternate stylesheet\" href=\"someCSS.css\" type=\"text/css\" title = \"someCSS\">");
I have also tried putting the .css files inside different directories
Web\WEB-INF\classes\someCSS.css
or
Web\WEB-INF\someCSS.css
or even
Web\someCSS.css
I really don't know what's wrong, I did try searching through the forums but it's not leading me anywhere, one suggested to use request.getContextPath() + \"/myStyle.css\" but i tried a couple of different ways to implement it(having it by itself, having it inside the out.println("") things...) but it just gives errors to that line..... if i'm doing it in a completely wrong way can anyone point me in the right direction??
Anyone who can help would be greatly appreciated :)
TomatoI just put the CSS file in the web application directory (this one: Web\someCSS.css) and my HTML simply says <link ... href="someCSS.css">. Works just fine. Of course if your servlet isn't in a web application but has a customized mapping, then I have no idea.
-
Float Drop CSS help needed, i'm loosing my mind.
here is an example ...
http://www.wiatrc.org/wiatrc/vendor/test.html
i know my code is a mess, i've searched the board, but have
succeeded in confusing myself even more.
i did the 'float left' and even took out one of my columns to
try to make it fit.
it seemed to work over here
http://www.wiatrc.org/wiatrc/vendors.html
any help would be appreciated.
dave htry messing with the padding and or margins setting them to
zero in your CSS. I tmight be helpful to post your html and css
code to get help more easily. There are lots of issues with
relapsing margins, default padding differences between browsers .
and some buggy stuff within IE.
Take a look at this page, there are some good posts on best
practices for preventing padding/ margin issues
CSS Margin and Padding
issues across browsers -
Hi guys, I need some serious help, I am making a website for
University and am struggling to center the website so that it stays
centered on different resolutions and when the window is made
smaller. My lecturer gave me the code which is apparently this -
body {
margin:50px 0px; padding:0px;
text-align:center;
#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
but I have no idea what to do with this stuff in order to
correctly implement it, the attached code is an example of one of
the pages I want centering, could someone either give me a step by
step walkthrough of what to do? or could they show me directly
where the code goes in the attached stuff.
Thanks in advancetry this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Simons Self Portrait Bio</title>
<style type="text/css">
<!--
body {
margin:50px 0px; padding:0px;
text-align:center;
#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
position:relative;
#apDiv1 {
position:absolute;
left:0px;
top:1px;
width:135px;
height:183px;
z-index:1;
#apDiv2 {
position:absolute;
left:76px;
top:119px;
width:383px;
height:226px;
z-index:2;
-->
</style>
</head>
<body>
<div id="Content">
<div id="apDiv1"><img src="Images/xboxbio.jpg"
width="700" height="500" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect"
coords="12,456,122,492" href="xbox.html" />
</map></div>
<div id="apDiv2">
<iframe src="bioframe.html"
width="383" height="200"
align="right" marginheight="0" marginwidth="0">
</iframe>
</div>
</div>
</body>
</html> -
I'm having a problem in IE 7 & maybe 8 with my website. Here is the link to the staging site:
http://www.checkmandesign.com/staging/
In IE 7 the main content div seems to be pushed down from where it is supposed to be. I am on a Mac and it looks fine in Firefox & Safari. I can't view it on a PC so I am going by what I am being told by friends and also what I see on browser shots. I am new to coding so perhaps my css is messy and causing this. Can anyone help? I am also having another issue with a jquery script in my portfolio pages. The gallery is not loading properly in IE 7&8. It's a known issue which some people have written fixes in the forums (http://blog.ilexius.de/blog-post/2010/09/27/javascript-galleria-and-ie6-7-and-8-compatibil ity/)
I am pasting my CSS below in case anyone can see something that I am missing regarding the content issue:
body, h1, h2, p, ul, li {
margin: 0px;
padding: 0px;
font: normal 12px/28px Arial, Helvetica, sans-serif;
color: #7d7c7c;
text-align: left;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
#content h1 {
font-size: 14px;
font-weight: bold;
color: #FD1D13;
display: block;
padding-bottom: 10px;
#content h2 {
font-size: 14px;
line-height: 28px;
color: #7d7c7c;
font-weight: bold;
#content p {
font-size: 12px;
line-height: 16px;
color: #7d7c7c;
display: block;
margin-top: 0px;
margin-bottom: 16px;
#outerWrapper {
width: 980px;
margin: 0px;
#header {
height: 136px;
float: none;
clear: none;
#nav_bar {
height: 108px;
top: 172px;
padding-left: 110px;
padding-top: 10px;
padding-right: 40px;
#content {
width: 460px;
left: 280px;
padding-left: 290px;
background: #ffffff;
text-align: left;
margin-top: 1px;
padding-top: 62px;
#footer {
height: 70px;
padding-top: 60px;
padding-left: 100px;
clear: both;
font-family: Arial, Helvetica, sans-serif;
#footer p {
font-size: 10px;
line-height: 18px;
color: #7d7c7c;
text-align: center;
#footer p .footerLinks .footerLinks {
color: #7d7c7c;
text-decoration: underline;
#sidebar-left {
width: 140px;
padding-left: 130px;
float: left;
padding-top: 62px;
font-size: 13px;
#sidebar-right {
float: right;
width: 151px;
padding-left: 40px;
position: absolute;
top: 150px;
left: 751px;
height: 400px;
#mailingList {
font-size: 12px;
font-weight: bold;
color: #FD1D13;
#form1 {
padding-top: 20px;
.navbar-icon {
border-right: 1px solid #999;
padding-right: 5px;
margin: 0px;
z-index: 10;
#nav-bartext {
position: absolute;
z-index: 200;
#thumbnails {
height: 471px;
.clientList {
list-style: disc inside;
line-height: 16px;
font-size: 12px;
.footerLinks {
font-size: 10px;
color: #7d7c7c;
font-weight: normal;
#sidebar-left {
font-size: 14px;
line-height: 28px;
color: #1B0499;
#sidebar-right p img {
padding-bottom: 10px;You can't have it both ways. You can either float a container or you can position it. I prefer to float columns.
#sidebar-right {
float: right;
width: 151px;
padding-left: 40px;
/**REMOVE ALL OF THIS**/
position: absolute;
top: 150px;
left: 751px;
height: 400px;
Learn CSS positioning in 10 Steps -
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Review Floats and Clearings -
http://css.maxdesign.com.au/floatutorial/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
I'm relatively new to CSS and stumbling around. Can someone look at this page and tell me how to get the "more" boxes lined up in the top four white boxes?
http://www.fbcwentzville.com/new_site_2010/index_new.html
Would I use a relative position and how would I go about doing that? Also, when you make changes to the css sheet within Dreamweaver, do changes take place immediately? I tried playing around with relative position and didn't see any changes to it.
Thanks!Hey Malaperty. Let me help you out and at least fix the issue at hand. Rather easy fix, but it will take a little pixel playing on your end to fine tune where you want your "more" buttons precisely.
First add postition:relative; to your .subdiv2 in the css. so the final code will look like this:
.subdiv2{
position:relative;
width:225px;
float:left;
margin:0 12px 0 0;
background:url(../images/sub_div_bg.gif) repeat-y 0 0 #D6D7A0;
color:#000;
height: 350px;
padding: 0;
Next, eliminate the margins from .subdiv2 p.more in your css and add the below code.
.subdiv2 p.more{
position:absolute;
bottom:20px;
right:20px;
I added 20px to the bottom and right properties but this is where you need to play with it to fine tune the placement. bottom:20px means it will be 20px from the bottom of the .subdiv2 div and right:20px means it will be 20px from the right side of the subdiv2 element.
I won't get into explaining why all this works as you have some links to learn all this.
As far as absolute positioning being a bad layout strategy...well that can't be any more wrong. It is only bad if it is misused and then things can get ugly. Use it right and it can make form some of the best web effects that you can imagine. Learn and love it, but always use it wisely.
Check this link out http://csszengarden.com/ here you will find they use absolute positioning all over the sample sites...truly thinking outside the box. So absolute positioning is not to fear! -
I'm having trouble setting the width of the <ul> in this Coda-Slider tab set up. I'd like all the tabs across the top to display in one line rather that wrap to two.
http://www.cidigitalmedia.com/coda-slider-2.0/index.html
You'll see the last tab wraps below.
Looked over the CSS and .js and could not find anything setting the <ul> to 552...
But IE Developer Tools toolbar and Firebug show an inline style of 552px...
I just can't find where that is.
CSS file:
http://www.cidigitalmedia.com/coda-slider-2.0/stylesheets/coda-slider-2.0.css
Would greatly appreciate some help.
Best wishes,
AdninjastratorThanks for your reply!
Turns out that the <ul> width was a math computation in the .js file (there was no <ul> width coded in the CSS or HTML).
A helpful soul over at:
http://stackoverflow.com/
helped me ID that line in the .js file.
ul.css({ width: 'auto', marginLeft: -18 });
I still had to use a neg margin to move the tabs all to the left... but all is working now.
http://www.cidigitalmedia.com/coda-slider-2.0/index.html
Best wishes,
Adninjastrator -
I'm using Dreamweaver CS5.5 as part of the CS5.5 master collection.
On my website I currently have a single style sheet (named style.css) and it contains 7 styles (.background, .networking, .header, .footer, .main, .mainround, .instruction).
Each page is constructed as follows:
.background is applied
.networking is applied to a table at the very top
.header is applied to a table below the .networking table
.main, .mainround, and/or .instruction is applied to table(s) within the body of the website
.footer is applied to the lowest table
The following is the same on EVERY single page of my site.
The .background style is applied to every page (consists of background-image, background-scroll: scroll; and background-repeat: no-repeat)
The .networking table will be including links/scripts to share my site on social networking websites.
The .header table includes my site logo as well 5 rollover images/links.
The .footer table inludes to rollover images/links.
What I want to do:
I want my "main" style to include all the information of the 4 aformentioned styles in one. For instance, say I name the style (within my style.css file) .background. When I apply .background to my site's body, at want that page to now have my background image and settings, the networking table with functioning links, the header table with my logo and rollovers and the footer tables with my rollovers. Though is nothing is contained in tables and are contained in something else, that is fine, as long as it is eficient and I get the desired style / effect!
Currently everything is centered on the page with auto left and right margins, the appropriate top margin to keep everything in order and properly spaced, and no bottom margin. I would need these settings/styles to remain, and I would need to be able to insert my site's content between the header and footer tables. If I need to exclude the footer table, I understand, but I feel everything else I want to do should be quite possible.
Thank you for your help fellow forum users. You have been an amazing help so far and I look forward to the day where I can actually answer someone else's questions!Thank you for responding Murray. This site is not yet live (a temporary page is currently up), so I will post the code for a page here, though it doesn't contain much info, it has all of my tables with the appropriate styles applied to them.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body class="background" onload="MM_preloadImages('buttons/Home/home-over.png','buttons/Schedule/schedule-over.png ','buttons/Register/register-over.png','buttons/Donate/donate-over.png','buttons/Supporter s/supporters-over.png','buttons/Legal/legal-over.png','buttons/Contact/contact-over.png')" >
<table width="800" border="0" cellpadding="0" cellspacing="0" class="networking">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
</table>
<table width="800" border="0" cellpadding="0" cellspacing="0" class="header">
<tr>
<th width="301" align="left" valign="middle" scope="col"><img src="images/logo.png" alt="Leapfest 30" width="301" height="120" /></th>
<th width="499" align="right" valign="bottom" scope="col"><a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','buttons/Home/home-over.png',1)"><img src="buttons/Home/home.png" name="home" width="70" height="18" border="0" id="home" /></a><a href="schedule.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('schedule','','buttons/Schedule/schedule-over.png',1)"><img src="buttons/Schedule/schedule.png" name="schedule" width="96" height="18" border="0" id="schedule" /></a><a href="register.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('register','','buttons/Register/register-over.png',1)"><img src="buttons/Register/register.png" name="register" width="88" height="18" border="0" id="register" /></a><a href="donate.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('donate','','buttons/Donate/donate-over.png',1)"><img src="buttons/Donate/donate.png" name="donate" width="80" height="18" border="0" id="donate" /></a><a href="supporters.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('supporters','','buttons/Supporters/supporters-over.png',1)"><i mg src="buttons/Supporters/supporters.png" name="supporters" width="114" height="18" border="0" id="supporters" /></a></th>
</tr>
</table>
<table width="800" border="0" cellpadding="0" cellspacing="0" class="instruction">
<tr>
<th scope="col"> </th>
</tr>
</table>
<table width="800" border="0" cellpadding="2" cellspacing="2" class="main">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="800" border="0" cellpadding="2" cellspacing="2" class="footer">
<tr>
<td align="right" valign="middle"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('legal','','buttons/Legal/legal-over.png',1)"><img src="buttons/Legal/legal.png" name="legal" width="65" height="18" border="0" id="legal" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','buttons/Contact/contact-over.png',1)"><img src="buttons/Contact/contact.png" name="contact" width="82" height="18" border="0" id="contact" /></a></td>
</tr>
</table>
</body>
</html> -
Hi guys,
First off, thanks for reading and I do appreciate any help
that anyone can give me. The item that I'm need a hand with is
this: -
http://www.final-exodus.net/testing/walbrook2/
I've been having a play around with CSS and have kept it
simple so far, just so I can keep a clear idea of what's going on.
I'm quite keen to avoid using tables and for the most part had
managed to that until I ran into a problem with the navigation div
(img_nav). If I try to place second div alongside this one, it ends
up above or below it. I can't use a float property or it will just
move to the far left or right of the screen, when I want it to
appear next to the banner.
So, I figured our old friend the table might help. The page
you can see above is for a one row, two column table, with a spry
(version 1.4) menu in the left and the image on the right BUT the
spry menu item pushes the length of the table out of line with the
image.
So,I'm stuck. As such, my main questions are: -
1 - Is there a CSS combination I can use to "stack" the Spry
navigation to the left of my image without having to reasort to
hard coding or table.
2 - How can I edit the height of the Spry menu bar?
I can attach code here if it will help anyone.S_Andrews wrote:
> Hi guys,
>
> First off, thanks for reading and I do appreciate any
help that anyone can
> give me. The item that I'm need a hand with is this: -
>
>
http://www.final-exodus.net/testing/walbrook2/
Hi,
Just a thought - you could try downloading a css layout,
preferably a 2
col and dropping your spry menu into the side column
(normally the nav
column) - you can download some here to play with....
http://csstinderbox.raykonline.com/
This may give you a better understanding of css layouts.
HTH
chin chin
Sinclair -
Hello,
I am desperately trying to learn CSS layout (through
sitepoint books and online tutorials) I just don't seem to be
getting it.
within my editable region i have put 3 div tags 1.- for main
text content, 2- animated gif 3- small text box.
I have floated 1 to the left 2 to the right and 3 after #2 to
right.(to appear undearneath but in line with the second) when i
preview in broswer it looks ok, close to what I want (though not
exact), but when i upload to server and look at it it looks
terrible.
I am going about this the wrong way should I have just two
div tags ( main text content and combine my animated gif and small
text box?) the link is here (be forwarned it looks awful) :
http://members.iinet.net.au/[email protected]/index.html
any help appreciated i really want to learn this and not have
to use tables in this site.
Thank you,
ShontelleStop spamming these forums.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Courtney Kaboola" <[email protected]> wrote
in message
news:eg78jj$jpo$[email protected]..
> here's a joke to cheer u up : )
>
> A male driver is pulled over by a cop and the following
conversation takes
> place:
>
> Man: What's the problem officer?
>
> Cop: You were going at least 75 in a 55 zone.
>
> Man: No sir, I was going 65.
>
> Wife: Oh Harry. You were going 80.
>
> (Man gives his wife a dirty look.)
>
> Cop: I'm also going to give you a ticket for your broken
tail light.
>
> Man: Broken tail light? I didn't know about a broken
tail light!
>
> Wife: Oh Harry, you've known about that tail light for
weeks.
>
> (Man gives his wife a dirty look.)
>
> Cop: I'm also going to give you a citation for not
wearing your seat belt.
>
> Man: Oh, I just took it off when you were walking up to
the car.
>
> Wife: Oh Harry, you never wear your seat belt.
>
> Man: Shut your mouth, woman!
>
> Cop: Ma'am, does your husband always talk to you this
way?
>
> Wife: No, only when he's drunk.
> -
just put up my new index page but can't seem to get the page
to hold its layout when it gets reduced - especially the righthand
part just stays where it is and a few other bits do to
link -- www.healthhokkaido.com
Any help most appreciatedThe error report was posted on your site check request by the
way :-)
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
~ Forum Posting Guidelines ~
http://www.adobe.com/support/forums/guidelines.html
CSS Tutorials for Dreamweaver:
http://www.adobe.com/devnet/dreamweaver/css.html
"quiero mas" <[email protected]> wrote in message
news:f0k1de$31l$[email protected]..
> well someoens got to break the record right !
> Lol should have checked myself - thanks Walt -
Ok, I'm in the middle of creating a site using DW MX 2004.
I'm largely using CSS and the div tag utility. I have got a
lovely banner, and a long thin grey bar that sits underneath it and
extends for the width of the page. Only problem is, when I put
things below the grey bar (images, navigation bar etc.) they act as
though its not there. It works fine in the browser, but not on my
DW screen. The images overlap my grey bar, and I would rather this
was not occuring.
Any help?</script>
<link href="styles.css" rel="stylesheet"
type="text/css">
</head>
<body
onLoad="MM_preloadImages('Button_News_Down.png','Button_SL_Down.png','Button_WL_Down.png' ,'Button_About_Down.png','Button_SC_Down.png')">
<div id="logo"></div>
<div id="news"></div>
<div id="navbar">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="button1space"><a href="javascript:;"
target="_top"
onClick="MM_nbGroup('down','group1','Home','Button_News_Down.png',1)"
onMouseOver="MM_nbGroup('over','Home','Button_News_Down.png','',1)"
onMouseOut="MM_nbGroup('out')"><img src="Button_Home_Up.png"
alt="" name="Home" width="150" height="38" border="0"
onload=""></a></td>
</tr>
<tr>
<td class="button2space"><a href="javascript:;"
target="_top"
onClick="MM_nbGroup('down','group1','News','Button_News_Down.png',1)"
onMouseOver="MM_nbGroup('over','News','Button_News_Down.png','',1)"
onMouseOut="MM_nbGroup('out')"><img src="Button_News_Up.png"
alt="" name="News" width="150" height="38" border="0"
onload=""></a></td>
</tr>
<tr>
<td class="button3space"><a href="javascript:;"
target="_top"
onClick="MM_nbGroup('down','group1','SL','Button_SL_Down.png',1)"
onMouseOver="MM_nbGroup('over','SL','Button_SL_Down.png','',1)"
onMouseOut="MM_nbGroup('out')"><img src="Button_SL_Up.png"
alt="" name="SL" width="150" height="38" border="0"
onload=""></a></td>
</tr>
<tr>
<td class="button4space"><a href="javascript:;"
target="_top"
onClick="MM_nbGroup('down','group1','WL','Button_WL_Down.png',1)"
onMouseOver="MM_nbGroup('over','WL','Button_WL_Down.png','',1)"
onMouseOut="MM_nbGroup('out')"><img src="Button_WL_Up.png"
alt="" name="WL" width="150" height="38" border="0"
onload=""></a></td>
</tr>
<tr>
<td class="button5space"><a href="javascript:;"
target="_top"
onClick="MM_nbGroup('down','group1','SC','Button_SC_Down.png',1)"
onMouseOver="MM_nbGroup('over','SC','Button_SC_Down.png','',1)"
onMouseOut="MM_nbGroup('out')"><img src="Button_SC_Up.png"
alt="" name="SC" width="150" height="38" border="0"
onload=""></a></td>
</tr>
<tr>
<td class="button6space"><a href="javascript:;"
target="_top"
onClick="MM_nbGroup('down','group1','About','Button_About_Down.png',1)"
onMouseOver="MM_nbGroup('over','About','Button_About_Down.png','',1)"
onMouseOut="MM_nbGroup('out')"><img src="Button_About_Up.png"
alt="" name="About" width="150" height="38" border="0"
onload=""></a></td>
</tr>
</table>
</div>
<div id="saive"><img src="saivejm_b&w.png"
width="300" height="397"></div>
<p> </p>
<p> </p>
</body>
</html>
Maybe you are looking for
-
Multiple iPhoto Libraries - FB & Flickr syncing
If I create mutliple iPhoto libraries (because my current library is getting big), using iPhoto Library Manager, will photos synced to Facebook and Flickr be maintained or be deleted if they're not in the "open" library? In other words, how does hav
-
Hi friends, when i click the run button the browser has opened and closed immediatly.before it was working properly. i tried both of mozila and IE,and checked run time tab in Preference.its ok same like other client systems. i take that http://oracli
-
APO/DP transport of user selections
Hello dear experts, I've created selections and assigned them (DP) to users in a QA system. When transporting to a Production system, the selections are transferred, but not the user assignments of those selections. Any ideas of how to transport thos
-
Pasting into Photoshop CS5 + Auto Resize
We copy a lot of existing elements from illustrator files into existing Photoshop documents. The dimensions of the Illustrator files are much larger, so we've always pasted into Photoshop and it resizes to the smaller photoshop document. When I paste
-
Hi, I created a trigger to avoid users to run commands outside the Forms/Reports environment, which means they must execute their commands using the Application servers (App1 and App2, machine column, in v$session). I need to send them the message "Y