The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
 Reply to this topicStart new topic
> Adding vertical lines to the left and right of full length of website
mferguson
post Sep 24 2020, 07:54 PM
Post #1





Group: Members
Posts: 7
Joined: 24-September 20
Member No.: 27,553
First website I've ever made, complete noob to HTML.

I've been working on a portfolio website where I can upload different things that I work on and employers can take a gander at it.

It's almost complete, there is just one thing I haven't been able to get working: vertical lines.

http://www.michaelblakeferguson.com

I am simply trying to get a vertical line to span the full length of the website on the left and right sides, the idea is that it will make it more "enclosed".

I currently have a wrapper for the entire <body>.

I tried to create a table with 3 columns. C1 for the left vertical line, C2 for the body, C3 for the right vertical line.

That seemed to work initially but it squished all of the elements together in C2.

I have a feeling that it is a margin problem. But each time I try to adjust the values it completely messes up the positioning of all elements.

I am pretty sure I've taken the path of least resistance and made this website the ghetto way, so I'm not sure if I've done something incorrectly...

Can someone explain the correct way to go about putting vertical lines around what already exists?

Any comments on the way I've gone about programming things so far?

I'm assuming you can look at the HTML code using F12, but if needed I can upload the source code.

This post has been edited by mferguson: Sep 24 2020, 07:55 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 24 2020, 08:01 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
All the way? Try adding left and right borders to BODY and see how that looks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 24 2020, 11:11 PM
Post #3


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
If you want the border around your content, then place this in your CSS .wrapper rule:
CODE
border-style: solid;
And yes, that does place borders around all 4 sides. If you only want left and right sides then use this instead:
CODE
border-left: 5px solid red;
border-right: 5px solid red;

You can adjust border width, style or color as you want.

This post has been edited by CharlesEF: Sep 24 2020, 11:11 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 25 2020, 07:10 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
Note that on a short page the BODY border will not extend all the way to the bottom of the viewport. Another method might be to use two CSS background images that repeat vertically (on a short page such images will extend all the way, even if the BODY element doesn't):

CODE
body {
background-image: url(left.gif),  url(right.gif);
background-repeat: repeat-y; /* makes the images tile vertically */
background-position: top 0 left 100px, top 0 right 100px;
}

See also https://developer.mozilla.org/en-US/docs/We...ground-position
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mferguson
post Sep 25 2020, 10:06 AM
Post #5





Group: Members
Posts: 7
Joined: 24-September 20
Member No.: 27,553
QUOTE(CharlesEF @ Sep 24 2020, 11:11 PM) *

If you want the border around your content, then place this in your CSS .wrapper rule:
CODE
border-style: solid;
And yes, that does place borders around all 4 sides. If you only want left and right sides then use this instead:
CODE
border-left: 5px solid red;
border-right: 5px solid red;

You can adjust border width, style or color as you want.


Thanks to all the suggestions. Adding the left and right borders to the wrapper worked immediately.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mferguson
post Sep 25 2020, 01:54 PM
Post #6





Group: Members
Posts: 7
Joined: 24-September 20
Member No.: 27,553
I wanted to ask about one other problem I'm having.

I added a hyperlink which opens the html file for the website to see the code in another tab.

But this actually just loads the website again, understandably.

Is there a way to hyperlink to an html viewer and open the html file such as this one?

https://www.w3schools.com/html/tryit.asp?fi...e=tryhtml_basic
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 25 2020, 02:42 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Meh, the board keeps adding stuff to the URL and breaks it. ninja.gif

You need to paste the URL in the address bar.
CODE
view-source:https://htmlhelp.com/


As a link it would look like this. It will work with supporting browsers.

CODE
<a href="view-source:https://htmlhelp.com/">View source of the WDG front page</a>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mferguson
post Sep 25 2020, 03:59 PM
Post #8





Group: Members
Posts: 7
Joined: 24-September 20
Member No.: 27,553
QUOTE(pandy @ Sep 25 2020, 02:42 PM) *

Meh, the board keeps adding stuff to the URL and breaks it. ninja.gif

You need to paste the URL in the address bar.
CODE
view-source:https://htmlhelp.com/

As a link it would look like this. It will work with supporting browsers.

CODE
<a href="view-source:https://htmlhelp.com/">View source of the WDG front page</a>



Thanks for the help. I was able to get this working on IE but I guess for Chrome it didn't work.

I realized that the w3schools website I linked above had the capability to generate hyperlinks.

You just paste your source code, save & then it generates a hyperlink for others to view it.

biggrin.gif

This post has been edited by mferguson: Sep 25 2020, 03:59 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 25 2020, 04:06 PM
Post #9


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
That didn't work in any of my browsers. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 25 2020, 04:58 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Works at least in FF, IE and Edge.

If you want the whole source for everyone, I think you need to look at some server side solution. JavaScript can get what's inside HTML with innerHTML, but I don't think it's able to get the actual HTML tags and the doctype.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mferguson
post Sep 25 2020, 05:02 PM
Post #11





Group: Members
Posts: 7
Joined: 24-September 20
Member No.: 27,553
Both of my previous issues were solved with pretty easy single line adjustments. So hopefully this one will be as well.

I've just referenced the following page so I can get image modal working on the first OSU seal:

https://www.w3schools.com/w3css/tryit.asp?f...css_modal_image

But when I load the page the modal is already activated, and pushes the other elements out of the way.

Screen recording -> https://streamable.com/je9oww

Here is the code block for the first table row which the modal code was put into

CODE

<tr>
    <div class=osuseal>
        <img src="seal.png" alt="seal" width="125" height="125" style="cursor:zoom-in" onclick="document.getElementById('modal01').style.display='block'">
        <div id="modal01" class="w3-modal" onclick="this.style.display='none'"><span class="w3-button w3-hover-red w3-xlarge w3-display-topright">&times;</span>
            <div class="w3-modal-content w3-animate-zoom">
                <img src="seal.png">
            </div>
        </div>
    </div>
    <div class=abet>
        <img src="abet.png" alt="abet" width="180" height="63">
    </div>
    <center>
        <div class=library>
            <img src="edmonlow.jpg" alt="library" width="500" height="192">
        </div>
    </center>
    <div style="clear: both;"></div>
</tr>


div class=osuseal & div class=abet just 'float: left' & 'float: right', respectively.

The code seems to work fine on the w3schools website, is there any obvious reason as to why it acts so differently in my implementation?

Edit: Just made a small fix to add some </div>'s that were missing. Modal problem still exists.

This post has been edited by mferguson: Sep 25 2020, 05:13 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 25 2020, 05:30 PM
Post #12


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(pandy @ Sep 25 2020, 11:58 PM) *

Works at least in FF, IE and Edge.

Strange, could I have disabled it somehow? But at some of my browsers use default configurations. Can't think of a global Windows setting preventing this.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 25 2020, 05:42 PM
Post #13


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Nothing is unthinkable when it comes to Win10. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 25 2020, 08:46 PM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(mferguson @ Sep 26 2020, 12:02 AM) *

Both of my previous issues were solved with pretty easy single line adjustments. So hopefully this one will be as well.

I've just referenced the following page so I can get image modal working on the first OSU seal:

https://www.w3schools.com/w3css/tryit.asp?f...css_modal_image

But when I load the page the modal is already activated, and pushes the other elements out of the way.

Screen recording -> https://streamable.com/je9oww

Here is the code block for the first table row which the modal code was put into

CODE

<tr>
    <div class=osuseal>
        <img src="seal.png" alt="seal" width="125" height="125" style="cursor:zoom-in" onclick="document.getElementById('modal01').style.display='block'">
        <div id="modal01" class="w3-modal" onclick="this.style.display='none'"><span class="w3-button w3-hover-red w3-xlarge w3-display-topright">&times;</span>
            <div class="w3-modal-content w3-animate-zoom">
                <img src="seal.png">
            </div>
        </div>
    </div>
    <div class=abet>
        <img src="abet.png" alt="abet" width="180" height="63">
    </div>
    <center>
        <div class=library>
            <img src="edmonlow.jpg" alt="library" width="500" height="192">
        </div>
    </center>
    <div style="clear: both;"></div>
</tr>


div class=osuseal & div class=abet just 'float: left' & 'float: right', respectively.

The code seems to work fine on the w3schools website, is there any obvious reason as to why it acts so differently in my implementation?

Edit: Just made a small fix to add some </div>'s that were missing. Modal problem still exists.


I don't follow that really, but the large image must be made display: none initially.



What they are doing is basically a simple show/hide. I.e. you toggle the display property between none and block (in this case, there are other options).

CODE
#mystery-content   { display: none }


HTML
<p onclick="document.getElementById('mystery-content').style.display='block'">Show image</p>

<div id="mystery-content">
<img src="https://htmlhelp.com/icon/wdglogo.gif">
</div>



Then you can of course style it further. For example like this.

CODE
#mystery-content   { display: none;
                     position: relative; top: -3em }


HTML
<p onclick="document.getElementById('mystery-content').style.display='block'">Show image and make it cover this sentence.</p>

<div id="mystery-content">
<img src="https://htmlhelp.com/icon/wdglogo.gif">
</div>


The whole point is that the image (or whatever it is) is intitially hidden by CSS and then shown on user action by letting JS change the value of the display property.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 27 2020, 12:29 PM
Post #15


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(pandy @ Sep 26 2020, 12:42 AM) *

Nothing is unthinkable when it comes to Win10. unsure.gif

Could the Windows "app associations by protocol" have something to do with this (similar to how you can associate "mailto:" links with your local email program)? I checked, but couldn't find any entry for "view-source:". unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mferguson
post Sep 27 2020, 07:21 PM
Post #16





Group: Members
Posts: 7
Joined: 24-September 20
Member No.: 27,553
I got the modals working by using some code for lightboxes:

https://www.w3schools.com/howto/howto_js_lightbox.asp

IPB Image

Now I'm facing an identifier problem, all lightboxes show the same image.

Here is the HTML:

CODE

<div class="row">
    <div class="column" style="margin:0px 0px 0px 26px">
        <img src="edmonlow.jpg" style="width:235%;border-style: solid; border-width: medium; border-color: black;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
    </div>
</div>

<div id="myModal" class="modal">
        <span class="close cursor" onclick="closeModal()">×</span>
        <div class="modal-content">
                            
            <div class="mySlides">
                <div class="numbertext">1 / 1</div>
                <img src="edmonlow.jpg" style="width:100%">
            </div>
                        
            <a class="prev" onclick="plusSlides(-1)">❮</a>
            <a class="next" onclick="plusSlides(1)">❯</a>
                            
            <div class="caption-container">
                <p id="caption"></p>
            </div>
                    
            <div class="column">
                <img class="demo cursor" src="edmonlow.jpg" style="width:100%" onclick="currentSlide(1)" alt="Edmon Low Library">
            </div>
    </div>
</div>


Here is the JS:
CODE

<script>
    function openModal()
    {
        document.getElementById('myModal').style.display = "block";
    }
    
    function closeModal()
    {
        document.getElementById('myModal').style.display = "none";
    }
                
    var slideIndex = 1;
    showSlides(slideIndex);
                
    function plusSlides(n)
    {
        showSlides(slideIndex += n);
    }

    function currentSlide(n)
    {
        showSlides(slideIndex = n);
    }

    function showSlides(n)
    {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        var captionText = document.getElementById("caption");
        if (n > slides.length)
        {
            slideIndex = 1
        }
                    
        if (n < 1)
        {
            slideIndex = slides.length
        }
                    
        for (i = 0; i < slides.length; i++)
        {
            slides[i].style.display = "none";
        }
                    
        for (i = 0; i < dots.length; i++)
        {
            dots[i].className = dots[i].className.replace(" active", "");
        }
                    
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";
        captionText.innerHTML = dots[slideIndex-1].alt;
    }
</script>


This StackOverflow post had a solution, but it did not seem to work for me.

All of the CSS code for the modals already have a '.' in front of them which in my understanding lets it have multiple instances for different IDs.

I tried changing myModal in the HTML to myModal# for each ID, and adding a document.getElementById('myModal#').style.display = "block" for each ID in the openModal() & closeModal() functions.

That didn't work at all. What is the correct way to do the indentifiers for multiple lightboxes?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 27 2020, 08:09 PM
Post #17


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
I don't do 'lightbox' but you should really start a new thread for new questions. You have already tacked a couple of new questions to this thread. By doing this you limit your audience. In the future, please start a new thread when you have new questions. It doesn't matter that the questions apply to the same project.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 27 2020, 08:55 PM
Post #18


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I only see markup for one "lightbox".

Is it the same image as with the show/hide you are working with? It's better to try to understand how something works and to get it right than to try the next trick when it doesn't.

CharlesEF is right. This thread is getting really confusing now. For instance, I don't know if we are still working with the same problem as in your previous question that you've found a another approach for or if this is something totally different.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 27 2020, 08:56 PM
Post #19


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(Christian J @ Sep 27 2020, 07:29 PM) *

QUOTE(pandy @ Sep 26 2020, 12:42 AM) *

Nothing is unthinkable when it comes to Win10. unsure.gif

Could the Windows "app associations by protocol" have something to do with this (similar to how you can associate "mailto:" links with your local email program)? I checked, but couldn't find any entry for "view-source:". unsure.gif


One of your many blockers and add-ons maybe? tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mferguson
post Sep 28 2020, 07:53 AM
Post #20





Group: Members
Posts: 7
Joined: 24-September 20
Member No.: 27,553
QUOTE(CharlesEF @ Sep 27 2020, 08:09 PM) *

I don't do 'lightbox' but you should really start a new thread for new questions. You have already tacked a couple of new questions to this thread. By doing this you limit your audience. In the future, please start a new thread when you have new questions. It doesn't matter that the questions apply to the same project.


Eh... I've gotten in some trouble by spamming questions on other forums before. It seems like the majority of forum moderators prefer you to limit your project to a single thread. If I made a post for each time I was looking for help I'd have 3/4 posts by now.

This post has been edited by mferguson: Sep 28 2020, 07:57 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 10:05 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC