Solved

how can make my text relative stable to the left edge of the top menu (the horizontal line)

Posted on 2016-09-02
5
57 Views
Last Modified: 2016-10-13
I have a cms(YII)  supported web site which makes me hard to tune the position of the texts. For each product, I have text describing the product which is a picture at the right side of the text. Please see the attached copyscreen for the problem.

The page's css description is as following:

  

..........
.text  {
    font-family: 'Lato', sans-serif;
    position: absolute;
    display:block;
    top:86px;
    width:30%;
    left:25%;
    right:80%;
    font-size:20px;
    color:grey;
    line-height:27px;
  }


 .text img{
   position:relative;
   padding-left:770px;
   cursor:pointer;
   width:100px;
   height:auto;
  }.......

Open in new window


https://www.ezvizlife.com/item/6.html?from=&position=tab
0
Comment
Question by:Jason Yu
  • 2
5 Comments
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 41783352
The link works fine for me.

Jason, this page doesn't seem mobile friendly. Are you sure you want to put effort into it?

Anyway, since this is a simple change, the two following rules could be added to do that. However, I don't really recommend absolutely positioning the text like that (there's an awful lot of unnecessary white-space in that image).
.pwhole.banner1 {
  max-width: 980px;
  padding: 0 20px;
  margin: 0 auto;
  position: relative;
}
.pwhole.banner1 .text {
  left: 20px;
}

Open in new window

0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41783391
Interesting - this is what I get
Screen shot
0
 
LVL 42

Expert Comment

by:David S.
ID: 41783634
Hmm... Jason, did you change servers recently? That could be caused by incomplete propagation of a DNS record update (the same address points to locations on two different servers, depending on whether the DNS lookup gets the new or old record).
0
 

Author Closing Comment

by:Jason Yu
ID: 41842383
thanks david, we got it resolved. It's a css settings.
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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 customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

805 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