Richard Korts
asked on
Page Element sizing (CSS)
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
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
What exactly do you want larger - the font...?
ASKER
Gary,
Yes. See rkassoc.org/Davis/outdoor- lighting.h tml
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
Yes. See rkassoc.org/Davis/outdoor-
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
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
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
ASKER
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
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
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
with
Add this css
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
<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>
with
<div class="menu-container"><div id=\'blue-solid\'></div><div id="includedContent"></div></div>
Add this css
menu-container {
position:relative
}
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
ASKER
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
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
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
Add this class
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;
}
Add this class
.menu-container {
float: right;
height: 250px;
margin-right: 70px;
margin-top: -185px;
position: relative;
width: 200px;
}
ASKER
Looks like this: http://rkassoc.org/Davis/index20.htm
Attached is new css file in case I screwed up.
Thanks
stylesn.css
Attached is new css file in case I screwed up.
Thanks
stylesn.css
Remove this - it's pointless using jquery to add it.
Then the code on your page becomes
$('<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");
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>
ASKER
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
Attached is index21.htm.
I really appreciate all your detail help on this.
Thanks
index21.htm
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;
}
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;
}
ASKER
Made changes.
http://rkassoc.org/Davis/index21.htm
Attached are index21 & stylesn.css
index21.htm
stylesn.css
http://rkassoc.org/Davis/index21.htm
Attached are index21 & stylesn.css
index21.htm
stylesn.css
Go through my changes above again - you are missing a few things.
ASKER
I could only find one missing; went through them twice.
css file attached.
http://rkassoc.org/Davis/index21.htm
Thanks
stylesn.css
css file attached.
http://rkassoc.org/Davis/index21.htm
Thanks
stylesn.css
Add this
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;">
body{
max-width: 968px;
}
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;">
ASKER
What else do you want
ASKER
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
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
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
You can click the Duff beer can and there is an Hire Me link
In #blue-solid{} increase this to say 430px (looks fine in my FF)
border-top: 420px solid #283781;
border-top: 420px solid #283781;
ASKER
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!!!
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!!!
ASKER
Gary,
Can you email me a screen shot of how it looks in FF on your computer?
richardkorts@gmail.com
Thanks
Can you email me a screen shot of how it looks in FF on your computer?
richardkorts@gmail.com
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
ASKER
A for effort, the problem is not solved.
You haven't applied the fixes in the last comment.
ASKER
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.
<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.
Do an hard refresh in FF to reload the page.
ASKER
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
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
You're best to open a new question, that's a lot of work to do.
ASKER
OK