Jump to content

Text on Wrapper


wayne

Recommended Posts

I'd like to add a block of text on the right side of the wrapper on most of my pages, but cannot figure out the CSS code to do that. No problem getting the existing text on the wrapper, but aligning new text to run down the right side has me stumped. Really appreciate some help.

My website in question is My link

Link to comment
Share on other sites

Not sure exactly what you mean. If you mean a 2 column layout you could do something like this

/**CSS CODE**/
.wrapper {
width:1100px;/*Whatever you want*/
}
.sidebar {
float:right;
width: 280px;
}
.maincontent {
float:left;
width:800px;
}

 

 

<!-- HTML CODE -->
<div class="wrapper">
  <div class="sidebar">
   Text or whatever here that you wanted
  </div>
  <div class="maincontent">
     Whatever you want here.
  </div>
</div>

Edited by benjaminmorgan
Link to comment
Share on other sites

How's this?

 

I've also made the following changes:

 

  1. moved the background image out of the HTML and into the CSS and removed the 'fixed' property to keep the content from covering the 'waynewillison' logo when scrolling up.
  2. I removed wrapper2, since it had no purpose
  3. For the #wrapper, I changed the bottom margin to zero (was 170px), that prevents the additional space you created at the bottom.
  4. Removed the <br> after the 'navlist, and added padding-bottom to #navlist instead.

And never mind the rest, I thought I'd figured something out, but I just noticed that my solution worked in Chrome but not fx - back to the drawing board.

Link to comment
Share on other sites

See if this works:

 

http://alturl.com/wiugx

 

I added the new division following your navigation and used this CSS, which of course needs to be adjusted depending on what you are looking for.

 

#floater {
width: 150px;
background: white;
position: relative;
float: right;
top: 100px;
}

 

Overall, if you can post the link to the page you're working on, it might help understand what exactly you have in mind.

Link to comment
Share on other sites

The page needs to be uploaded to your server. I think your link points to your hard drive, and we cannot get to that.

 

Just name it draft.html (or whatever - something that none of the actual pages of your site link to), that way we can see what you're working on.

Link to comment
Share on other sites

My mistake. Now that I moved it up to follow the navlist as you did it works.

 

 

Here's the css #floater {

width: 150px; color: white; position: relative; float: right; top: 50px;}

 

Now that the text is showing in the box, it has moved all the existing image text off center of the image,while it is still centered in the wrapper.(the image moved left to accommadate the extra space needed for the floater text box). Any way of correcting that?

Link to comment
Share on other sites

My mistake. Now that I moved it up to follow the navlist as you did it works.

 

 

Here's the css #floater {

width: 150px; color: white; position: relative; float: right; top: 50px;}

 

Now that the text is showing in the box, it has moved all the existing image text off center of the image,while it is still centered in the wrapper.(the image moved left to accommadate the extra space needed for the floater text box). Any way of correcting that?

 

 

Yes... You have to include the text you want centred under the image in the same DIV. Without doing this the text applies to the DIV it is in. Simply put it applies to POST and You need a PIC DIV.

 

Ok so as follows are a number of things I kept finding as i went through. To be fair to fix one thing to have it break for you isn't going to work... I broke it down, explained why things can't be done but at the end of this long post it is all cleaned up to a point. It is up to you to edit the h1 and the p tags that were empty to use them or get rid of them.

 

Here is your existing code:

<div id="post">
<div id="floater">
<p>This is a special box with some text next to the main wrapper.</p>
</div>
<img src="laimages/lowhangingstorm.jpg" width="720" height="479"  title="A storm brews over Barbados beach" alt="A storm brews over Barbados beach" > <p>
</p>
<div class="arrownav">
<a href="beach.html"><img src="laimages/rightarrow.jpg" alt=""></a>
</div>
<div class="arrownav2">
<a href="lonewave.html"><img src="laimages/leftarrow.jpg" alt=""></a>
</div>
<h3>storm brews over barbados beach</h3>
<p class="right"><a href="prints2.html">Purchase Info</a></p>
</div>

 

Here is the placement which will float that text centred under the image:

 

<div id="post">
<div id="floater">
	<p>This is a special box with some text next to the main wrapper.</p>
</div>
<div id="pic">
	<img src="http://www.waynewillison.com/laimages/lowhangingstorm.jpg" width="720" height="479"  title="A storm brews over Barbados beach" alt="A storm brews over Barbados beach" > 
	<h3>storm brews over barbados beach</h3>

<p class="right"><a href="prints2.html">Purchase Info</a></p>
	<div class="arrownav">
		<a href="beach.html"><img src="http://www.waynewillison.com/laimages/rightarrow.jpg" alt=""></a>
	</div>
	<div class="arrownav2">
		<a href="lonewave.html"><img src="http://www.waynewillison.com/laimages/leftarrow.jpg" alt=""></a>
        </div>
</div>
</div>

 

#pic { width: 750px; float: left;}

 

Next... I noticed you have an issue with the location of the arrows to move forward or back to the previous/next image. I would suggest (from much past experience with these type of things) that for the sake of continuity and consistency page to page... You put those two DIV's inside another DIV. You can use clear:both; applied to the main DIV and it will sit below the image, title text and purchase info, OR you can even apply positioning to position it overlaying the image though be careful with this as it will affect the text box to the right should you have a larger amount of text there.

 

<div class="picnav">
<div class="arrownav">
<a href="beach.html"><img src="laimages/rightarrow.jpg" alt=""></a>
</div>
<div class="arrownav2">
<a href="lonewave.html"><img src="laimages/leftarrow.jpg" alt=""></a>
</div>
</div>

 

(placed before the closing tag for the PIC div)

 

with

 

.picnav {  width: 25%; clear: both; position: relative; margin:auto;}
.arrownav {position: relative;  float:right;   top: 20px;}
.arrownav2 {position: relative;  float:left;   top: 20px; }

 

Next:

 

THIS was ultimately the start of your conflict...

 

#post p  {margin-top: 15pt; margin-bottom: 5pt;margin-left: 130pt; margin-right: 130pt;}

 

You need to put your CSS in a different order. If you want that to apply to all the text within POST... Great. If you want floater to follow those rules too. If you do not want floater to follow them you need place paragraph attributes for floater in the CSS and ideally the FLOATER attributes should be listed after POST as it is the last attributes the system applies that show. It cascades down the levels.

 

Oh heck... Ultimately I messed with your code so it looked as I would put it *blush* seeing future problems as I solved one so here is the css, and the code:

 

*{margin: 0;  padding: 0;}

body { color: #000000;   font-family:Verdana, Arial, Helvetica, sans-serif; background:#080808 url(http://www.waynewillison.com/laimages/nongradient.jpg) repeat-x top fixed;}

.background   { width:;  position: fixed; left: 0; right: 0; top: 0; z-index: -1; }

#wrapper  { background: #151515; margin: 170px auto; width: 960px; padding: .5em; }
#wrapper2  {background:#151515;   margin: 15px auto; width: 960px; padding-top: 1em;  }

/*I eddited things here - you needed this to be before floater to not apply attributes superceeding floater attributes */
#post img {display:block; margin: 0 auto;}
#post {text-align:left;}
#post p  {margin-top: 15pt; margin-bottom: 5pt;margin-left: 130pt; margin-right: 130pt;}

/*I eddited things here - you needed paragraph attributes here */
#floater { width: 150px; background: white; position: relative; float: right; top: 50px;}
#floater p{ margin-top: 15pt; margin-bottom: 5pt;margin-left: 5pt; margin-right: 5pt; }

/*I eddited things here - wrapping the image and the title text is just good practice and allows the text to be centered to the image. The arrow nav also in this. */
#pic { width: 750px; float: left;}

/*I eddited things here - why do you need arrownav3? */
.picnav { width: 25%; clear: both; position: relative; margin:auto;}
.arrownav {position: relative;  float:right;   top: 20px;}
.arrownav2 {position: relative;  float:left;   top: 20px; }
.arrownav3 {position: absolute;  left:1100px;   top: 200px; }

#header {text-align:center;}


h1 { font-family:Arial, serif;font-weight:normal; color:#C1BEB3;letter-spacing:.1em;}
h1,h2,h3 {  margin:15px auto;}
h2,h3 { font-size: 100%;font-family:Arial,serif;font-weight:normal;color:#C1BEB3;letter-spacing:.1em;}
h3 {text-align:center;}

h4 {text-align:left; margin:15px;margin-bottom:0px;}

a{text-decoration:none;}
a:link {color:#ffcc99}   
a:visited {color:#99cc33}
a:hover {color:#993300}
a:active {color:#ffcc99}


p {font-size:90%}
p.left {text-align:left;}
p.center {text-align: center;}#content {margin: 35px;}p{ margin: 15px 0;}
p.right { text-align:right; }
p.text {font-color: white; font-size:70%; }

#navlist li {display: inline; list-style-type: none; }
#navlist a {padding: 3px 5px; }
#navlist a:link, #navlist a:visited{color: #fff;background-color: #151515; text-decoration: none}
ul#navlist{margin:15px auto; white-space: nowrap; text-align:center;}

#navlist a:hover{color: #fff; background-color: #808000; text-decoration: none;}
table{margin: 10px 50px;}

img.displayed {display:block; margin-left: auto; margin-right: auto }

#footer { text-align: center; font-size: .6em; clear:both; padding-bottom:5px;color:#C1BEB3}

.text { color: #C1BEB3 }

#shoppingcart { float:left;  } 

img {border-style:none;}
#images img{float:left;}
#images p{clear:both;}
#images img{margin:0 55px 0;padding: 15px;}
#images img {border: 0; }
#images limg{margin:0 55px 0;padding: 5px;}
#images timg{margin:0 55px 0;padding: 5px;}
#thumbs img {border:0; }

div.float { float: left; margin-left: 50px;margin-right: 30px;  }
div.float p.float {text-align:center; }

 

PLEASE... be mindful. I edited things, cleaned it up to do the same thing in less code, without extra bits on your css, and html. You will find 2 of these "What is this? DO YOU NEED ME HERE?" to decided if they are needed or bits of code that should have been taken out.

 

<!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=iso-8859-1" />
<title> Everglades, Landscape, New Day, Canal in Sawgrass </title>
<link rel="stylesheet" type="text/css" href="testing.css"media="all">
</head>

<body>
<div id="wrapper">
<div id="wrapper2">
<div id="header"> 
<h1>What is this? DO YOU NEED ME HERE?</h1>
<h2> Artistic nature photography</h2>
</div> 
<ul id="navlist">  
	   <li><a href="index.html">home</a></li>
  	 <li><a href="aboutus2.html">about</a></li>
  	 <li><a href="gallery2.html">everglades</a></li>
  	 <li><a href="islandlife.html">shorelines</a></li>
  	 <li><a href="maninnature.html">man in nature</a></li>
  	 <li><a href="contact2.html">contact</a></li>
  	 <li><a href="prints2.html">prints</a></li>
</ul>
<div id="post">
<div id="floater">
	<p>This is a special box with some text next to the main wrapper.</p>
</div>
<div id="pic">
	<img src="http://www.waynewillison.com/laimages/lowhangingstorm.jpg" width="720" height="479"  title="A storm brews over Barbados beach" alt="A storm brews over Barbados beach" > <p>What is this? DO YOU NEED ME HERE?</p>
	<h3>storm brews over barbados beach</h3>
<div class="picnav">
	<div class="arrownav">
		<a href="beach.html"><img src="http://www.waynewillison.com/laimages/rightarrow.jpg" alt=""></a>
	</div>
	<div class="arrownav2">
		<a href="lonewave.html"><img src="http://www.waynewillison.com/laimages/leftarrow.jpg" alt=""></a>
	</div>
</div>
</div>
<p class="right"><a href="prints2.html">Purchase Info</a></p>
</div>
<div id="footer">
<p>© All material and copyright by Wayne Willison. All rights reserved.</p>
</div>
</div> 
</div> 
</body>
</html>

 

See end result here. - See the two "What is this? DO YOU NEED ME HERE?" - without that code it looks like this.

  • Upvote 1
Link to comment
Share on other sites

Wow. Thanks tons.

I'll get this done tomorrow and post the finished product. That was a lot of work. I really appreciate it.

 

*soft smile*

 

No problem at all... Yes I suppose it could be a lot of work for some. I remember when I was starting out and it would be a lot of work, but now it comes with a lot more ease. At some point it will come as you code and you won't have to tweak things, but rather know that if you include certain things in your code it flows faster.

 

The learning of the process is why I wanted to explain the processes, steps and problems as I went and show you what I did and why.

 

Did you use a template as a base or did you start coding from nothing? Both are great options... Now days I code for myself but I also often take a piece of paper and a package of coloured pencils. I look at the design mock-up I have done, and figure out where my divs will be if I have something a bit more complex. Outer wrapper, header, content, left & right columns, footer... all seem to be standard for me. Though my header could be inside or outside my content as needed. It helps me wrap my head around the hierarchy of it all. And then when I look at the CSS to style it I look at the layout blocking to see what order I should be putting things in.

Link to comment
Share on other sites

That you explained the processes was a great help in me understanding the what's and why's of coding.

I started from nothing but this forum and few dozen googles. But the helpful people here is what made it all a lot easier. Btw, I like how you describe looking at the whole design in order to plan the order of the css.

 

Okay, I've gone through my whole website making the coding corrections you outlined above. I also made a few changes in wrapper dimensions, etc, but now

the nav bar and page heading(Artistic...) are off center. Actually they're obviously centered for the wrapper, but it looks awkward and I'd like to move them to the center of the image. I managed to move the h3 heading, but messed up the navbar in my attempt. If there's a solution in Css only it would save a lot of work, as I've already had to go through the entire site's html pages.

 

Here's the link to a page as it is now My link

Link to comment
Share on other sites

That you explained the processes was a great help in me understanding the what's and why's of coding.

I started from nothing but this forum and few dozen googles. But the helpful people here is what made it all a lot easier. Btw, I like how you describe looking at the whole design in order to plan the order of the css.

 

Okay, I've gone through my whole website making the coding corrections you outlined above. I also made a few changes in wrapper dimensions, etc, but now

the nav bar and page heading(Artistic...) are off center. Actually they're obviously centered for the wrapper, but it looks awkward and I'd like to move them to the center of the image. I managed to move the h3 heading, but messed up the navbar in my attempt. If there's a solution in Css only it would save a lot of work, as I've already had to go through the entire site's html pages.

 

Here's the link to a page as it is now My link

 

I looked and logically it is not off centre. However I think I know where you are struggling. Have you considered some visual detailing behind the text to the right to give it a visual balance? Maybe a 1-3 shade colour difference box effect with either rounded corners or some other funky corners effect? Or a gradient effect that gives that area something a touch brighter to balance things?

 

The reason I ask this is because if you move the header over it will essentially end up very unbalanced overall and it will look like the text is floating out of context.

 

Why not do a screen capture or mock-up on your graphic editing program to play with location. I am on the run right now and can't do it before I go out or I would show you.

Link to comment
Share on other sites

... or just as an alternative - to totally avoid any of these issues: Why not just put the box with the description under the photo?

 

That's the way I had it, but a lot of text(which I intend to write for most of the pages) competes visually with the image.

I'll try a faint or gradient box.

Link to comment
Share on other sites

I've settled on this. At least for now. And I appreciate the help very much. I think the grey text box looks pretty good. Any thoughts? My link

 

I like it. Much like I had pictured. The only thing I might have done because I am a girl and we do things like that is used a rounded corners technique and played with it... Maybe not rounded but a geometric shape... But then that is my style and yours is much more classic. I like it.

 

S

Link to comment
Share on other sites

I was bored and played around with this a bit - this might be another approach. The box floats relative, so at lesser resolutions, it starts pushing over the picture, but I don't think that's all bad, plus that would only affect those with much lower resolutions, but it doesn't push the image over either. If I had more time, I'd play around with background transparency a bit, but gotta tun:

 

http://aandbwebdesign.com/KSforum/everglades2.html

Link to comment
Share on other sites

I was bored and played around with this a bit - this might be another approach. The box floats relative, so at lesser resolutions, it starts pushing over the picture, but I don't think that's all bad, plus that would only affect those with much lower resolutions, but it doesn't push the image over either. If I had more time, I'd play around with background transparency a bit, but gotta tun:

 

http://aandbwebdesign.com/KSforum/everglades2.html

 

On firefox on my laptop the information is out of context completely and resting in the top right corner of the page. Te purchase link is out of place as well.

Link to comment
Share on other sites

Weird - I looked at it with FireFox, Chrome, and IE at home and with Firefox and IE on my work computer and with Safari on my iPhone, and it all looks just fine.

 

What do you suppose is different with your labtop?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...