Solved

Page Element sizing (CSS)

Posted on 2014-09-23
31
248 Views
Last Modified: 2014-09-23
Hello,

Please look at http://rkassoc.org/Davis/index12.htm.

This works EXACTLY like I want it to, except I want the "menu" block to be larger. I attach the main files the main files; index12.htm, b.html, style2.css & flexslider.css.

To make the menu bigger, I built this version: http://rkassoc.org/Davis/index20.htm. Obviously, it's not working, the main issues being (1), no transparency under that wedge left of the menu, (2) menu is too tall and , (3) menu is too wide. I've tried to fix these with NO success.

I attach the files for the index20 version; index20.htm, c.html, stylen.css, flexslider1.css.

The only intended difference in the flexslider.css file is the max-width parameter.

How can I make this work?

Thanks

Attached for index12 version are
b.html
index12.htm
styles2.css
flexslider.css
index20.htm
c.html
stylesn.css
flexslider1.css
0
Comment
Question by:Richard Korts
  • 16
  • 15
31 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40339541
What exactly do you want larger - the font...?
0
 

Author Comment

by:Richard Korts
ID: 40339582
Gary,

Yes. See rkassoc.org/Davis/outdoor-lighting.html

Like this, I believe it requires the blue "box" to be bigger (taller & wider).

The customer will NOT accept if the menus are perceivably different.

Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 40339622
What font size do you want?
It would be better for your design to seperate the menu links and the background as two seperate absolute positioned divs in a relative positioned container - because every change you make to one affects the position of the other - so you are constantly fixing changes
0
 

Author Comment

by:Richard Korts
ID: 40339638
Font - Just like it shows on index20.

I would be happy to have two separate elements, I don't know how to do that and maintain the semi fading transparency & the sloped left border (NOT horizontal) of the menu background.

Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 40339667
Fix the non closing bold tag here

<span style="line-height: 125%; padding-left: 20px; font-family: Memphis Pro Medium;"><b>PRODUCTS<b></span>

In your script replace
<div id=\'blue-solid\'><div id="includedContent"></div></div>

Open in new window


with
<div class="menu-container"><div id=\'blue-solid\'></div><div id="includedContent"></div></div>

Open in new window


Add this css
menu-container {
position:relative
}

Open in new window


Make those changes then we can make the other css changes.

Though I don't know why you are loading everything with js - why not just put it in the page to start with - not good for SEO
0
 

Author Comment

by:Richard Korts
ID: 40339710
Gary,

I would be VERY happy to simplify it; no jquery. Just tell me how.

I made the changes you indicated: http://rkassoc.org/Davis/index20.htm

The closing bold tag (</b>) was already there in c.html.

Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 40339744
This is going to mess up your layout - so I don't know how you envisage this is supposed to be looking

Amend these two classes to this

#includedContent {
    left: 20px;
    position: absolute;
    top: 0;
}

#blue-solid {
    border-left: 80px solid transparent;
    border-top: 420px solid #283781;
    left: -30px;
    position: absolute;
    right: 0;
    top: 0;
    width: 220px;
}

Open in new window



Add this class
.menu-container {
    float: right;
    height: 250px;
    margin-right: 70px;
    margin-top: -185px;
    position: relative;
    width: 200px;
}

Open in new window

0
 

Author Comment

by:Richard Korts
ID: 40339767
Looks like this: http://rkassoc.org/Davis/index20.htm

Attached is new css file in case I screwed up.

Thanks
stylesn.css
0
 
LVL 58

Expert Comment

by:Gary
ID: 40339804
Remove this - it's pointless using jquery to add it.
	$('<div id="white-transparent"><div class="inside-white-semi-transparent" style="width: 67%; font-size: 19px; color: #4D4B4B; font-family: \'Univers Pro 55 Roman\'; padding-top: 30px; padding-left: 12px; line-height: 135%;"><span class="black-text">Welcome to Oklahoma\'s leading wholesale distributor</br> for irrigation, pumps, landscape, pool and outdoor living. products. For over three decades, family-owned  Davis Pipe and Supply has supported professional contractors with in-stock availability, technical support and knowledgable personnel. <span class="blue-text" style="color: #283781;font-family: Memphis Bold;"><b>Experience the Davis Difference!</b></span></span></div></div><div class="menu-container"><div id=\'blue-solid\'></div><div id="includedContent"></div></div>').insertAfter(".flexslider .slides");

Open in new window



Then the code on your page becomes
<div class="flexslider">
<ul class="slides">
<li data-thumb="http://rkassoc.org/Davis/slide1a-thumb.jpg">
      <img src="http://rkassoc.org/Davis/slide1.jpg" />
    </li>
<li data-thumb="http://rkassoc.org/Davis/slide5-thumb.jpg">
      <img src="http://rkassoc.org/Davis/slide5.jpg" />
    </li>
<li data-thumb="http://rkassoc.org/Davis/slide2-thumb.jpg">
      <img src="http://rkassoc.org/Davis/slide2.jpg" />
    </li>
<li data-thumb="http://rkassoc.org/Davis/slide3-thumb.jpg">
      <img src="http://rkassoc.org/Davis/slide3a.jpg" />
    </li>
<li data-thumb="http://rkassoc.org/Davis/slide4-thumb.jpg">
      <img src="http://rkassoc.org/Davis/slide4a.jpg" />
    </li>
<li data-thumb="http://rkassoc.org/Davis/slide6-thumb.jpg">
      <img src="http://rkassoc.org/Davis/slide6.jpg" />
    </li>
</ul>
</div>

<div id="white-transparent">
	<div class="inside-white-semi-transparent" style="width: 67%; font-size: 19px; color: #4D4B4B; font-family: 'Univers Pro 55 Roman'; padding-top: 30px; padding-left: 12px; line-height: 135%;">
		<span class="black-text">
			Welcome to Oklahoma's leading wholesale distributor<br> for irrigation, pumps, landscape, pool and outdoor living. products. For over three decades, family-owned  Davis Pipe and Supply has supported professional contractors with in-stock availability, technical support and knowledgable personnel. 
			<span class="blue-text" style="color: #283781;font-family: Memphis Bold;">
				<b>Experience the Davis Difference!</b>
			</span>
		</span>
	</div>
	<div class="menu-container">
		<div id="blue-solid"></div>
		<div id="includedContent"></div>
	</div>
</div>

Open in new window

0
 

Author Comment

by:Richard Korts
ID: 40339822
I made the changes and called it index21. http://rkassoc.org/Davis/index21.htm

Attached is index21.htm.

I really appreciate all your detail help on this.

Thanks
index21.htm
0
 
LVL 58

Expert Comment

by:Gary
ID: 40339922
In #white-transparent {} change the position to relative and add
margin-top: -300px;

In #blue-solid {} remove left:-30px, change right:0 to right:5px, change the width to 240px

In .menu-container {} remove position:relative

You have two #includedContent {} classes - remove both and add
#includedContent {
    position: absolute;
    top: 10px;
}
0
 

Author Comment

by:Richard Korts
ID: 40339957
Made changes.

http://rkassoc.org/Davis/index21.htm

Attached are index21 & stylesn.css
index21.htm
stylesn.css
0
 
LVL 58

Expert Comment

by:Gary
ID: 40339968
Go through my changes above again - you are missing a few things.
0
 

Author Comment

by:Richard Korts
ID: 40340012
I could only find one missing; went through them twice.

css file attached.

http://rkassoc.org/Davis/index21.htm

Thanks
stylesn.css
0
 
LVL 58

Expert Comment

by:Gary
ID: 40340018
Add this
body{
    max-width: 968px;
}

Open in new window


Remove width: 289px; from
<div id="includedContent">
<div style="padding-left: 60px; padding-top: 10px; height: 259px; font-size: 19px; color: rgb(225, 223, 223);width: 289px;">
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:Richard Korts
ID: 40340046
Gary,

Seems like it's getting closer: http://rkassoc.org/Davis/index21.htm
0
 
LVL 58

Expert Comment

by:Gary
ID: 40340050
What else do you want
0
 

Author Comment

by:Richard Korts
ID: 40340067
Gary,

It looks like the attached index21.jpg in FireFox.

It looks like the attached chrome.jpg in Chrome.

I understand there is work involved. Can you work for me on a paid basis to get it right?  If so, how much?
index21.jpg
chrome.jpg
0
 
LVL 58

Expert Comment

by:Gary
ID: 40340081
Looks like you need to do an hard refresh in FF
You can click the Duff beer can and there is an Hire Me link
0
 
LVL 58

Expert Comment

by:Gary
ID: 40340084
In #blue-solid{} increase this to say 430px (looks fine in my FF)

border-top: 420px solid #283781;
0
 

Author Comment

by:Richard Korts
ID: 40340152
Did a hard refresh in FireFox; looks JUST like Chrome.

Where is that gold font coming from? Why are the dots in front of each list item, the css says NOT to do that.

This is just crazy!!!
0
 

Author Comment

by:Richard Korts
ID: 40340160
Gary,

Can you email me a screen shot of how it looks in FF on your computer?

richardkorts@gmail.com

Thanks
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40340170
Thats exactly like the one you said looked correct.
But...
In c.html your are not closing the style tag off - missing "

<div id="goback" style="color: #EED028; font-family: Memphis Pro Medium;></div>

And add to the CSS file
li {
    list-style: none;
}
0
 

Author Comment

by:Richard Korts
ID: 40340429
Yeah, that got rid of the gold & the "dot" marker

But it's still no good. I have to figure out a different approach.

Thanks for all your effort, I'm awarding you the points right after this.
0
 

Author Closing Comment

by:Richard Korts
ID: 40340430
A for effort, the problem is not solved.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40340450
You haven't applied the fixes in the last comment.
0
 

Author Comment

by:Richard Korts
ID: 40340484
You mean these:

<div id="goback" style="color: #EED028; font-family: Memphis Pro Medium;></div>

And add to the CSS file
li {
    list-style: none;
}

I applied them. They fixed the gold problem & the dots. In Chrome; when I refresh in FireFox, it's still that way. Don't know why, I am VERY TIRED of this right now. I cannot understand why it is SOOOOOOOOOOOOOO difficult to make this work.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40340494
Do an hard refresh in FF to reload the page.
0
 

Author Comment

by:Richard Korts
ID: 40340515
OK, I did.

I didn't spell this out before, but it needs to look as closely as possible to EXACTLY like www.davispipe.com.

See also attached.

I can open another question if you like.

Thanks
current-site.jpg
0
 
LVL 58

Expert Comment

by:Gary
ID: 40340532
You're best to open a new question, that's a lot of work to do.
0
 

Author Comment

by:Richard Korts
ID: 40340535
OK
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now