Jump to content


Photo

Text on Wrapper


  • Please log in to reply
28 replies to this topic

#1 wayne

wayne

    Member

  • Member
  • PipPip
  • 43 posts

Posted 26 November 2011 - 01:41 PM

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
  • 0

#2 benjaminmorgan

benjaminmorgan

    Advanced Member

  • Member
  • PipPipPipPip
  • 237 posts

Posted 26 November 2011 - 01:56 PM

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, 26 November 2011 - 01:57 PM.

  • 0
Things should be made as simple as possible, but not any simpler. -Albert Einstein

#3 wayne

wayne

    Member

  • Member
  • PipPip
  • 43 posts

Posted 26 November 2011 - 02:20 PM

Thanks, I tried this, but it doesn't contain the text in a block. I'm trying to add a block of text as a column on the right side of the existing wrapper.
  • 0

#4 benjaminmorgan

benjaminmorgan

    Advanced Member

  • Member
  • PipPipPipPip
  • 237 posts

Posted 26 November 2011 - 02:40 PM

It should work if you have your page layout inside this. Also the <img class="background" src="bg_palmscopy-copy2.jpg" alt="Image Background">
you might want to put in the css file as body {background: url(bg_palmscopy-copy2.jpg"; background-repeat:no-repeat;
background-attachment:fixed;z-index:-1;}
  • 0
Things should be made as simple as possible, but not any simpler. -Albert Einstein

#5 wayne

wayne

    Member

  • Member
  • PipPip
  • 43 posts

Posted 26 November 2011 - 03:15 PM

The text won't wrap and go down to the next line. Shouldn't I add a margin in CSS to contain it?
  • 0

#6 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,718 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 26 November 2011 - 04:05 PM

How's this?

I've also made the following changes:

  • 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.
  • I removed wrapper2, since it had no purpose
  • For the #wrapper, I changed the bottom margin to zero (was 170px), that prevents the additional space you created at the bottom.
  • 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.
  • 0

#7 benjaminmorgan

benjaminmorgan

    Advanced Member

  • Member
  • PipPipPipPip
  • 237 posts

Posted 26 November 2011 - 04:05 PM

Change the width of the div on the sidebar. It shouldn't go past the width of the div. Just make the div smaller and the main content bigger. and change the wrapper width too. make sure it is large enough to hold sidebar and maincontent... sidebar px width + maincontent px width <= wrapper px width
  • 0
Things should be made as simple as possible, but not any simpler. -Albert Einstein

#8 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,718 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 26 November 2011 - 04:14 PM

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.
  • 0

#9 wayne

wayne

    Member

  • Member
  • PipPip
  • 43 posts

Posted 26 November 2011 - 05:01 PM

I'm not too sure how to post a link to this page.
  • 0

#10 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,718 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 26 November 2011 - 05:08 PM

If it's uploaded, just copy what's in your browser address bar when you're on it.
  • 0

#11 wayne

wayne

    Member

  • Member
  • PipPip
  • 43 posts

Posted 26 November 2011 - 05:26 PM

Here's the page My link

As you can see, I can't get the floater to sit centered in the wrapper. Also I want to get rid of the white background and just make the text white against the dark wrapper.
  • 0

#12 wayne

wayne

    Member

  • Member
  • PipPip
  • 43 posts

Posted 26 November 2011 - 05:28 PM

Here's the page My link

As you can see, I can't get the floater to sit centered in the wrapper. Also I want to get rid of the white background and just make the text white against the dark wrapper.


Trying the link again http://www.N:\Documents\2009CssWebsiteremake2\lowhangingstorm.html

Edited by wayne, 26 November 2011 - 05:29 PM.

  • 0

#13 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,718 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 26 November 2011 - 05:31 PM

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.
  • 0

#14 wayne

wayne

    Member

  • Member
  • PipPip
  • 43 posts

Posted 26 November 2011 - 05:55 PM

Try again. My link

Edited by wayne, 26 November 2011 - 06:00 PM.

  • 0

#15 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,718 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 26 November 2011 - 06:24 PM

I had that floater div right following your nav division - and you don't have the CSS to go with it yet.
  • 0

#16 wayne

wayne

    Member

  • Member
  • PipPip
  • 43 posts

Posted 26 November 2011 - 06:46 PM

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?
  • 0

#17 DesignBySLS

DesignBySLS

    Advanced Member

  • Moderators
  • 610 posts

Posted 26 November 2011 - 08:32 PM

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>&copy; 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.
  • 1

#18 wayne

wayne

    Member

  • Member
  • PipPip
  • 43 posts

Posted 26 November 2011 - 09:00 PM

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

#19 DesignBySLS

DesignBySLS

    Advanced Member

  • Moderators
  • 610 posts

Posted 27 November 2011 - 04:35 PM

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.
  • 0

#20 wayne

wayne

    Member

  • Member
  • PipPip
  • 43 posts

Posted 28 November 2011 - 09:45 AM

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
  • 0

#21 DesignBySLS

DesignBySLS

    Advanced Member

  • Moderators
  • 610 posts

Posted 28 November 2011 - 10:27 AM

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.
  • 0

#22 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,718 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 28 November 2011 - 10:32 AM

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

#23 wayne

wayne

    Member

  • Member
  • PipPip
  • 43 posts

Posted 28 November 2011 - 10:56 AM

... 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.
  • 0

#24 DesignBySLS

DesignBySLS

    Advanced Member

  • Moderators
  • 610 posts

Posted 28 November 2011 - 04:53 PM

I suppose the other option would be an overlay over the bottom of the photo with the text... The problem is again with the amount of text... It can get a bit much unless you are keeping it short and sweet.
  • 0

#25 wayne

wayne

    Member

  • Member
  • PipPip
  • 43 posts

Posted 28 November 2011 - 05:28 PM

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
  • 0

#26 DesignBySLS

DesignBySLS

    Advanced Member

  • Moderators
  • 610 posts

Posted 28 November 2011 - 09:30 PM

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
  • 0

#27 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,718 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 29 November 2011 - 07:19 AM

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://aandbwebdesig...verglades2.html
  • 0

#28 DesignBySLS

DesignBySLS

    Advanced Member

  • Moderators
  • 610 posts

Posted 29 November 2011 - 08:45 AM

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://aandbwebdesig...verglades2.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.
  • 0

#29 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,718 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 29 November 2011 - 09:07 AM

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?
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users