Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    199
    Thanks
    30
    Thanked 0 Times in 0 Posts

    Absolute within Relative in CSS File?

    Hi all, I'm using a component inside of Joomla which only allows me to edit a CSS file to control behavior of certain components and I'm trying to get 4 elements to line up together in a line, similar to a table. Here's my current CSS:

    Code:
    #row1 {
        position: relative;
    }
    #row1 .bnumberofstudents {
        left: 0px;
        position: absolute;
        top: 10px;
        width: 250px;
    }
    #row1 .bstudentpopulation {
        left: 250px;
        position: absolute;
        top: 10px;
        width: 250px;
    }
    #row1 .bgrades {
        left: 500px;
        position: absolute;
        top: 10px;
        width: 250px;
    }
    #row1 .bstudentteacherratio {
        left: 750px;
        position: absolute;
        top: 10px;
        width: 250px;
    }
    It doesn't seem to work though, it just puts them one after the other, and there is content above and below this line of elements so I can't use just the absolute, I need to make a relative container and then put the 4 absolute values inside. I know how to do this with HTML div's, but can't figure out how to do this using only a CSS file?

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    You're not showing the relevant HTML, it's just as important as the javascript. There is also another way of doing what you want, that is 'float'. But show us the HTML first.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    199
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    You're not showing the relevant HTML, it's just as important as the javascript. There is also another way of doing what you want, that is 'float'. But show us the HTML first.
    The page is at: http://usgei.com/index.php/us-progra...olumbia-school

    Here's a snip of the relevant HTML, you can see full source at above page:

    Code:
    <div class="componentheading" style="float:left;"><h1>Allendale Columbia School 中文</h1></div><div id="left"></div>
    <div id="right"></div>
    <div class="field_block bcitystate"><div class="field_label"></div><div class="field_value">Allendale, Columbia</div></div><div class="field_block bprofile"><div class="field_label"></div><div class="field_value">Founded in 1883 Holy Trinity High School is a private catholic school with our campus located in the heart of Winsted only one hour-drive from Minneapolis. A wide range of academic subjects and extracurricular activities are offered. Academic standards are high and students are expected to perform in order to grade well. Furthermore, in order to graduate from Holy Trinity High School, students must complete volunteer hours for the community. 11-12th graders are required to give four hours of their time per quarter in service to the community.
    Holy Trinity Catholic High School students are prepared for the next stage in their life by a rigorous required schedule of classes including English, mathematics, social studies, science, and religion. In addition, they enjoy a wide selection of elective courses.</div></div><div class="field_block bschoolmotto"><div class="field_label">School Motto</div><div class="field_value">asdf</div></div><div class="field_block bschoolmission"><div class="field_label">School Mission</div><div class="field_value">asdf</div></div><div class="field_block bacademic"><div class="field_label">Academic</div><div class="field_value">Bishop ODowds college preparatory curriculum includes Advanced Placement courses in 19 subjects, and an enhanced range of services to accommodate college bound students with learning differences. The curriculum includes honors courses in mathematics, language, English, social studies, science, computer programming and multimedia design. Bishop ODowd also offers a fully integrated arts and drama program, an environmental science program and five foreign languages are also offered. A wireless technology environment throughout the school allows students and faculty easy access to the Internet, and encourages student-centered learning. Students are encouraged to bring and use laptops on campus. Technology is integrated in class rooms throughout the school campus and all students starting grade 9 will be required to use a laptop for their classes.</div></div><div class="field_block bdormitories"><div class="field_label">Dormitories and School Residences</div><div class="field_value">asdf</div></div><div class="field_block bcommunityinformation"><div class="field_label">Community Information</div><div class="field_value">West Hills is a high-income, well-educated residential and commercial neighborhood in the western San Fernando Valley region of Los Angeles. Several Historic landmarks and many city parks are to be found within the community.</div></div><div class="field_block blocation"><div class="field_label">Location</div><div class="field_value">Oakland is located in Northern California in the San Francisco Bay Area and is one of the nation's most diverse cities both culturally and physical. The city's landscape is a picturesque mix of lovely hillside neighborhoods; exciting and diverse architecture, a bustling waterfront, 19 miles of shoreline along the San Francisco Bay, unparalleled Bay views, and more parks. Students have plenty of activities to keep them busy and can easily take the train into San Francisco.</div></div><div class="field_block bdates"><div class="field_label">Dates</div><div class="field_value">Estimated Start Date: Fall-Late August, Spring-Early January
    Estimated End Date:Fall-Late January, Spring-Mid June</div></div><div class="field_block bnumberofstudents"><div class="field_label">Number of Students</div><div class="field_value">320</div></div><div class="field_block bstudentpopulation"><div class="field_label">Student Population</div><div class="field_value">Co-educational</div></div><div class="field_block bgrades"><div class="field_label">Grades</div><div class="field_value">9-12</div></div><div class="field_block bstudentteacherratio"><div class="field_label">Teacher/Student Ratio</div><div class="field_value">1:12</div></div><div class="field_block baverageclasssize"><div class="field_label">Average Class Size</div><div class="field_value">N/A</div></div><div class="field_block bteacherswithadvanceddegr"><div class="field_label">Teachers with Advanced Degrees</div><div class="field_value">N/A</div></div><div class="field_block beslprograms"><div class="field_label">ESL Programs</div><div class="field_value">No</div></div><div class="field_block bibprograms"><div class="field_label">IB Programs</div><div class="field_value">No</div></div><div class="field_block bofferdiploma"><div class="field_label">Offer Diploma</div><div class="field_value">Yes</div></div><div class="field_block bschooluniform"><div class="field_label">School Uniform</div><div class="field_value">Yes</div></div><div class="field_block byearestablished"><div class="field_label">Year Established</div><div class="field_value">N/A</div></div><div class="field_block bcampussize"><div class="field_label">Campus Size</div><div class="field_value">N/A</div></div><div class="field_block breligiousaffiliation"><div class="field_label">Religious Affiliation</div><div class="field_value">Christian</div></div><div class="field_block bforeignlanguages"><div class="field_label">Foreign Languages</div><div class="field_value">Spanish</div></div><div class="field_block barts"><div class="field_label">Arts</div><div class="field_value">Music, Drama, Art, Pottery, Speech, Architectural Drawing, Photography</div></div><div class="field_block bapcourses"><div class="field_label">AP Courses</div><div class="field_value">None, but regular classes are taught at a very high level making sure students are well prepared for future university studies.</div></div><div class="field_block bappassrate"><div class="field_label">AP Pass Rate</div><div class="field_value">80%</div></div><div class="field_block bsports"><div class="field_label">Sports</div><div class="field_value">Baseball Basketball Football Soccer Volleyball</div></div><div class="field_block bextracurricular"><div class="field_label">Extracurricular Activities & Clubs</div><div class="field_value">Band Choir Drama National Honor Society Student Council</div></div><div class="field_block bsataverage"><div class="field_label">SAT Average</div><div class="field_value">800</div></div><div class="field_block bactaverage"><div class="field_label">ACT Average</div><div class="field_value">790</div></div><div class="field_block buniversityacceptancerate"><div class="field_label">University Acceptance Rate</div><div class="field_value">80%</div></div><div class="field_block bpartiallistofcollege"><div class="field_label">Partial List of College and University Acceptances</div><div class="field_value">University Acceptances Students go on to colleges and universities in Minnesota as well as out of state. The vast majority of all students are college bound when entering Holy Trinity and almost all are successful in their college or university applications.</div></div><div class="field_block bclosestairports"><div class="field_label">Closest International and Local Airports</div><div class="field_value">Minneapolis St Paul International Airport (MSP)</div></div><div class="field_block bwebsite"><div class="field_label">For Details Visit Website:</div><div class="field_value"><a href="http://www.winstedholytrinity.org/" target="_blank">http://www.winstedholytrinity.org/</a></div></div>

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    You need to edit the HTML and change your CSS too.
    Code:
    <div class="field_block bnumberofstudents"> Change to.
    
    <div class="field_block"  id="bnumberofstudents"> And similar for the others.
    
    #row1 #bnumberofstudents {
        left: 0px;
        position: absolute;
        top: 10px;
        width: 250px;
    }                               And similar for the others. 
    
    Those divs need to all be inside the id="row1' div.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #5
    Regular Coder
    Join Date
    Jan 2006
    Posts
    199
    Thanks
    30
    Thanked 0 Times in 0 Posts
    is there anyway to do it without editing the HTML? The problem is the HTML is dynamically generated via the Joomla component, so I have no control over that, the only part I can change is the CSS file.

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Quote Originally Posted by Remix919 View Post
    is there anyway to do it without editing the HTML? The problem is the HTML is dynamically generated via the Joomla component, so I have no control over that, the only part I can change is the CSS file.
    Realize that the class is field_block bnumberofstudents , and not bnumberofstudents. However that doesn't look right for the .css., you may be able to enclose it in quotes. You would be better to modify the joomla.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #7
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Am I blind or do I not see a row1 anywhere in that code?

    Either way, I'm having difficult understanding what you are trying to achieve. Maybe a picture would be better because if you want them to line up in a line, why don't you just float them to the left and give them a width of 25% or whatever? There's a million ways to achieve this, but I don't think simply lining them up is what you want.

    Quote Originally Posted by DrDOS View Post
    Realize that the class is field_block bnumberofstudents , and not bnumberofstudents. However that doesn't look right for the .css., you may be able to enclose it in quotes. You would be better to modify the joomla.
    What's wrong with class="field_block bnumberofstudents"?
    My signature :)

  • #8
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Quote Originally Posted by ttkim View Post
    What's wrong with class="field_block bnumberofstudents"?
    Code:
    CSS
    .field_block bnumberofstudents
    {
    
    }
    Will it read that unambiguously ? I don't know.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •